/* =============================================================================
 * IEC design tokens (STEP 4) — three layers: primitive -> semantic -> component.
 * Faithful translation of the approved Tailwind v4 `@theme` block in the
 * Next.js app (src/app/globals.css) into standard CSS custom properties.
 * Components consume semantic/ergonomic tokens, never raw primitives.
 * Values are the exact approved hexes/scales from the reference implementation.
 * Dark theme is deferred (phase 2), same as the reference — a value swap here.
 * ========================================================================== */
:root {
  color-scheme: light;

  /* ---- Primitive: green (brand) ---- */
  --color-green-50: #f2f8f5;
  --color-green-100: #e0efe7;
  --color-green-200: #c1dfcf;
  --color-green-300: #93c7ac;
  --color-green-400: #5fa985;
  --color-green-500: #348d64;
  --color-green-600: #17754c;
  --color-green-700: #115c3c;
  --color-green-800: #0e4a31;
  --color-green-900: #0a3624;
  --color-green-950: #062418;

  /* ---- Primitive: navy ---- */
  --color-navy-800: #1f2a44;
  --color-navy-900: #171f33;

  /* ---- Primitive: gold (accent) ---- */
  --color-gold-300: #e8ce8c;
  --color-gold-400: #ddba62;
  --color-gold-500: #c9a227;
  --color-gold-600: #7a6118;

  /* ---- Primitive: warm neutrals (Tailored Luxury Cream Palette) ---- */
  --color-neutral-0: #ffffff;
  --color-neutral-50: #faf8f4;
  --color-neutral-100: #f5f2eb;  /* Warm ivory/cream canvas from 444 reference */
  --color-neutral-200: #eae4d8;
  --color-neutral-300: #d8d0c0;
  --color-neutral-400: #9da39e;
  --color-neutral-500: #6f7872;
  --color-neutral-600: #555e58;
  --color-neutral-700: #3c443f;
  --color-neutral-800: #232825;
  --color-neutral-950: #141715;

  /* ---- Primitive: functional ---- */
  --color-success: #17754c;
  --color-info: #2563eb;
  --color-warning: #b45309;
  --color-error: #b91c1c;

  /* ---- Semantic aliases (Warm Elegant Launch) ---- */
  --color-surface: var(--color-neutral-100);
  --color-surface-raised: var(--color-neutral-0);
  --color-surface-sunken: var(--color-neutral-200);
  --color-surface-tint: var(--color-green-50);
  --color-surface-brand: var(--color-green-600);
  --color-surface-brand-deep: var(--color-green-800);
  --color-surface-inverse: var(--color-navy-900);

  --color-text-primary: var(--color-neutral-950);
  --color-text-secondary: var(--color-neutral-600);
  --color-text-on-brand: var(--color-neutral-0);
  --color-text-on-brand-muted: var(--color-green-100);
  --color-text-accent: var(--color-gold-600);
  --color-text-accent-on-brand: var(--color-gold-300);
  --color-link: var(--color-green-700);

  --color-border: rgba(24, 28, 25, 0.09);
  --color-border-interactive: rgba(24, 28, 25, 0.22);
  --color-accent-hairline: var(--color-gold-500);

  --color-ring: var(--color-green-500);
  --color-ring-on-brand: var(--color-gold-300);

  --color-cta: var(--color-green-700);
  --color-cta-hover: var(--color-green-800);

  --color-disabled-fg: var(--color-neutral-400);
  --color-disabled-bg: var(--color-neutral-200);

  /* ---- Ergonomic aliases ---- */
  --color-ink: var(--color-text-primary);
  --color-muted: var(--color-text-secondary);
  --color-on-brand: var(--color-text-on-brand);
  --color-on-brand-muted: var(--color-text-on-brand-muted);
  --color-brand: var(--color-surface-brand);
  --color-brand-deep: var(--color-surface-brand-deep);
  --color-inverse: var(--color-surface-inverse);
  --color-tint: var(--color-surface-tint);
  --color-line: var(--color-border);
  --color-line-strong: var(--color-border-interactive);
  --color-accent: var(--color-text-accent);
  --color-accent-brand: var(--color-text-accent-on-brand);

  /* ---- Typography ----
     ONE family: Thmanyah Serif Display, the face the hero headline uses. It
     carries full Latin AND Arabic in every weight, so nothing switches family
     between locales and hierarchy comes from weight alone. The role aliases all
     resolve to it, so every component keeps the token it already consumed. */
  --font-primary:
    'Thmanyah Serif Display', 'Thmanyah Serif Text', 'IBM Plex Sans Arabic',
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, serif;
  --font-sans: var(--font-primary);
  --font-display: var(--font-primary);
  --font-serif: var(--font-primary);

  /* Fluid type scale: floor ~390px, ceiling ~2200px (it used to stop at 1280px,
     which is what froze sections while the full-bleed hero kept growing). */
  --text-display: clamp(2.25rem, 1.3rem + 4vw, 5.5rem);
  --lh-display: 1.15;
  --text-h1: clamp(1.875rem, 1.38rem + 2vw, 3.75rem);
  --lh-h1: 1.2;
  --text-h2: clamp(1.625rem, 1.35rem + 1.15vw, 2.75rem);
  --lh-h2: 1.25;
  --text-h3: clamp(1.375rem, 1.24rem + 0.55vw, 1.875rem);
  --lh-h3: 1.35;
  --text-h4: clamp(1.25rem, 1.16rem + 0.34vw, 1.5rem);
  --lh-h4: 1.45;
  --text-body-lg: clamp(1.125rem, 0.83rem + 0.4vw, 1.375rem);
  --lh-body-lg: 1.75;
  --text-body: clamp(1rem, 0.72rem + 0.39vw, 1.2rem);
  --lh-body: 1.75;
  --text-body-sm: clamp(0.9375rem, 0.71rem + 0.31vw, 1.1rem);
  --lh-body-sm: 1.7;
  --text-caption: clamp(0.875rem, 0.71rem + 0.23vw, 1rem);
  --lh-caption: 1.6;

  /* ---- Radii ---- */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 1.75rem;

  /* ---- Elevation — brand-tinted "Soft UI" ramp ---- */
  --shadow-xs: 0 1px 2px rgba(10, 54, 36, 0.04), 0 1px 3px rgba(10, 54, 36, 0.05);
  --shadow-sm: 0 1px 2px rgba(10, 54, 36, 0.04), 0 4px 12px rgba(10, 54, 36, 0.06);
  --shadow-md: 0 2px 4px rgba(10, 54, 36, 0.05), 0 12px 28px rgba(10, 54, 36, 0.09);
  --shadow-lg: 0 4px 8px rgba(10, 54, 36, 0.06), 0 24px 48px rgba(10, 54, 36, 0.12);

  /* ---- z-index scale ---- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 40;
  --z-overlay: 50;
  --z-modal: 60;
  --z-toast: 70;
  /* Above --z-toast because the skip link is the one thing that would otherwise
     paint through the entry overlay: it is the first focusable element and sits
     at the top-left corner the overlay covers. */
  --z-loader: 80;

  /* ---- Motion tokens (restraint: short, decelerating, purposeful) ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.32, 0.72, 0, 1);
  --motion-fast: 150ms;
  --motion-base: 200ms;
  --motion-gentle: 300ms;
  --motion-slow: 450ms;
  --motion-distance: 16px;

  /* ---- Layout ----
     Holds ~1160px through a 1280px laptop, then widens toward the hero's own
     measure so sections are not stranded mid-screen at 2K. */
  --container-max: clamp(1160px, 30vw + 780px, 1560px);
  --container-gutter: clamp(1.25rem, 0.9rem + 1.5vw, 2.5rem);
  /* Bar height at rest and once condensed — the committee sub-nav docks under it. */
  --header-height: 84px;
  --header-height-condensed: 64px;
}