/*
 * INSPIRE WOMEN DESIGN SYSTEM - SINGLE SOURCE OF TRUTH
 *
 * RTL/LTR ARCHITECTURE RULE
 * Use CSS logical properties exclusively in every project stylesheet.
 * Physical directional properties are forbidden.
 *
 * Use margin-inline-start, never margin-left.
 * Use padding-block, never padding-top or padding-bottom.
 * Use inset-inline-end, never right.
 * Use text-align: start, never text-align: left.
 * Use border-inline-start, never border-left.
 *
 * Components may consume semantic color tokens only. Palette primitives are
 * private inputs for the semantic alias and status blocks in this file.
 */

:root {
  /* Color primitives - change palette values here only. */
  --purple-50: #f5f1fa;
  --purple-100: #eae0f4;
  --purple-200: #d7c2e8;
  --purple-300: #be9bdc;
  --purple-400: #9e6bc8;
  --purple-500: #7d43b5;
  --purple-600: #663399;
  --purple-700: #56278b;
  --purple-800: #481f78;
  --purple-900: #5a388c;

  --gold-50: #fcf8ed;
  --gold-100: #f7edd2;
  --gold-200: #efdba4;
  --gold-300: #e7c879;
  --gold-400: #dfb85d;
  --gold-500: #cf9e47;
  --gold-600: #b98631;
  --gold-700: #936621;
  --gold-800: #6f4a18;
  --gold-900: #4a3011;

  --neutral-0: #ffffff;
  --neutral-50: #f8f7fa;
  --neutral-100: #efedf2;
  --neutral-200: #ded9e3;
  --neutral-300: #c5bec9;
  --neutral-400: #a79eac;
  --neutral-500: #817887;
  --neutral-600: #655d6b;
  --neutral-700: #4b4451;
  --neutral-800: #312c35;
  --neutral-900: #1c1820;
  --neutral-1000: #000000;

  /* Semantic color aliases - the only color tier components may consume. */
  --color-surface: var(--neutral-0);
  --color-surface-subtle: var(--neutral-50);
  --color-surface-muted: var(--neutral-100);
  --color-surface-inverse: var(--purple-900);
  --color-surface-accent: var(--gold-50);
  /* Supplied frontend brand kit: artwork lavender and derived surface. */
  --color-brand-lavender: #b09ae2;
  --color-surface-lavender: #f3effb;
  --radius-xl: 1.5rem;
  --radius-pill: 999rem;
  --text-display: clamp(2.75rem, 4.6vw, 4.5rem);

  --color-text-primary: var(--neutral-900);
  --color-text-secondary: var(--neutral-700);
  --color-text-muted: var(--neutral-600);
  --color-text-inverse: var(--neutral-0);
  --color-text-accent: var(--purple-900);

  /*
   * Accessible gold text on light surfaces. The artwork gold (#CF9E47)
   * is decorative/UI-only on white at 2.43:1. This darker companion is
   * reserved for normal-size gold text and measures 4.92:1 on white.
   */
  --color-text-gold-safe: #8f6a2b;

  --color-action-primary: var(--purple-900);
  --color-action-primary-hover: var(--purple-800);
  --color-action-primary-active: var(--purple-700);
  --color-action-primary-text: var(--neutral-0);
  --color-action-secondary: var(--gold-500);
  --color-action-secondary-hover: var(--gold-500);
  --color-action-secondary-active: var(--gold-500);
  --color-action-secondary-text: var(--neutral-1000);

  --color-accent: var(--gold-500);
  --color-border: var(--neutral-200);
  --color-border-strong: var(--neutral-600);
  --color-focus-ring: var(--purple-900);

  /*
   * Admin status tier - intentionally independent from brand accent aliases.
   * These hues begin from the brand palette but may change without altering it.
   */
  --color-status-pending: #8a5a0a;
  --color-status-review: #cf9e47;
  --color-status-eligible: #2f6b62;
  --color-status-rejected: #a23b47;
  --color-status-selected: #5a388c;

  /*
   * Fluid 1.25 modular type scale.
   * Each step preserves the ratio at the 23.4375rem and 90rem endpoints
   * (equivalent to 375px and 1440px with the default root size).
   */
  --text-xs: clamp(0.64rem, calc(0.611831rem + 0.120188vw), 0.72rem);
  --text-sm: clamp(0.8rem, calc(0.764789rem + 0.150235vw), 0.9rem);
  --text-base: clamp(1rem, calc(0.955986rem + 0.187793vw), 1.125rem);
  --text-lg: clamp(1.25rem, calc(1.194982rem + 0.234742vw), 1.40625rem);
  --text-xl: clamp(1.5625rem, calc(1.493728rem + 0.293427vw), 1.7578125rem);
  --text-2xl: clamp(1.953125rem, calc(1.86716rem + 0.366784vw), 2.197265625rem);
  --text-3xl: clamp(2.44140625rem, calc(2.33395rem + 0.45848vw), 2.746582031rem);
  --text-4xl: clamp(3.051757813rem, calc(2.917437rem + 0.5731vw), 3.433227539rem);

  /* 4px-base spacing scale. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-9: 2.25rem;
  --space-10: 2.5rem;
  --space-11: 2.75rem;
  --space-12: 3rem;
  --space-13: 3.25rem;
  --space-14: 3.5rem;
  --space-15: 3.75rem;
  --space-16: 4rem;

  --border-width-hairline: 0.0625rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;

  /* Exactly two elevation levels. */
  --elevation-1: 0 0.125rem 0.375rem rgb(28 24 32 / 0.12);
  --elevation-2: 0 0.5rem 1.5rem rgb(28 24 32 / 0.18);
}