/* ============================================================
   Attieh & Chebli — tokens.css
   The single home of raw values. A new value = a new token = sign-off.

   BRAND DIRECTION (locked 15 July 2026, supersedes the earlier
   ink/gold system): international corporate palette — refined
   blue primary, deep navy identity surfaces, warm-white paper,
   muted bronze reserved for thin lines, separators, small
   accents, and hover details. Benchmark: leading international
   firms (Skadden / White & Case / Freshfields register), kept
   more agile and personal.
   ============================================================ */

:root {
  /* ---- Blue (primary) ---- */
  --blue-300: #7FA8D9;  /* interactive on dark surfaces ≈6.4:1 on navy-900 */
  --blue-500: #0B5CAB;  /* brand primary */
  --blue-600: #124E8C;  /* interactive on light surfaces ≈7.6:1 on paper-50 */
  --blue-700: #0E3C6B;  /* hover deepen on light */

  /* ---- Navy (identity surfaces) ---- */
  --navy-800: #12294A;  /* raised dark surface */
  --navy-900: #0B1F3A;  /* deep navy — primary dark surface */
  --navy-950: #071426;  /* footer / darkest */

  /* ---- Bronze (premium detail only: thin lines, separators,
          small accents, hover states — never dominant) ---- */
  --bronze-300: #C9AB7C; /* detail hover on dark */
  --bronze-500: #B08D57; /* brand accent */
  --bronze-600: #8F7040; /* detail on light needing more depth */

  /* ---- Paper ---- */
  --paper-50: #FAF9F6;   /* warm white / ivory */
  --paper-100: #F3F1EB;
  --paper-200: #E7E3D9;

  /* ---- Text ---- */
  --text-on-dark: #F6F8FB;
  --text-on-dark-muted: #B6C2D2;
  --text-on-light: #1B2430;
  --text-on-light-muted: #5A6474;

  /* ---- Functional (forms only) ---- */
  --color-error: #A0522D;   /* terracotta */
  --color-success: #5B6B4F; /* olive */

  /* ---- Type families ----
     Elegant legal/institutional serif for major headlines;
     sans for navigation, body, and interface. */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-text: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  /* Reserved for /ar/ namespace (staged post-launch) */
  --font-display-ar: "Amiri", serif;
  --font-text-ar: "IBM Plex Sans Arabic", sans-serif;

  --weight-display: 500; /* 600 fallback if dark-surface shimmer persists */

  /* ---- Type scale (px reference in comments) ----
     display 40→64/1.05 · h1 34→48/1.1 · h2 28→36/1.15
     h3 26/1.25 · h4 20/1.35 · lead 20/1.55 · body 17/1.65
     small 15/1.55 · overline 13/1.4 · nav 15                */
  --size-display: clamp(2.5rem, 1.3rem + 3vw, 4rem);
  --leading-display: 1.05;
  --size-h1: clamp(2.125rem, 1.425rem + 1.75vw, 3rem);
  --leading-h1: 1.1;
  --size-h2: clamp(1.75rem, 1.35rem + 1vw, 2.25rem);
  --leading-h2: 1.15;
  --size-h3: 1.625rem;
  --leading-h3: 1.25;
  --size-h4: 1.25rem;
  --leading-h4: 1.35;
  --size-lead: 1.25rem;
  --leading-lead: 1.55;
  --size-body: 1.0625rem;
  --leading-body: 1.65;
  --size-small: 0.9375rem;
  --leading-small: 1.55;
  --size-overline: 0.8125rem;
  --leading-overline: 1.4;
  --tracking-overline: 0.12em;
  --size-nav: 0.9375rem;

  /* ---- Measure ---- */
  --measure-body: 68ch;
  --measure-lead: 60ch;

  /* ---- Space (4/8/12/16/24/32/48/64/96/128/160) ----
     space-10 and space-11 are for section rhythm only. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --space-11: 10rem;

  /* ---- Layout ---- */
  --container: 77.5rem;        /* 1240 */
  --container-wide: 90rem;     /* 1440 */
  --container-narrow: 47.5rem; /* 760 */
  --gutter: 2rem;              /* 32 → 24 → 20 by tier (layout.css) */
  --side-pad: 3rem;            /* 48 → 32 → 20 by tier (layout.css) */

  /* ---- Rules ---- */
  --rule-width: 1px;             /* hairline */
  --rule-accent-length: 3rem;    /* 48px detail rule — "the monogram" */
  --rule-accent-thickness: 2px;

  /* ---- Radius: 0 globally; inputs may use 2px ---- */
  --radius-input: 2px;

  /* ---- Elevation (the only two shadows) ---- */
  --elevation-dropdown: 0 12px 32px rgba(7, 20, 38, 0.16);
  --elevation-sticky: 0 1px 0 rgba(7, 20, 38, 0.12);

  /* ---- Motion ---- */
  --motion-fast: 120ms;
  --motion-base: 180ms;
  --motion-slow: 400ms;
  --motion-reveal: 600ms;
  --motion-dropdown: 160ms;
  --motion-header: 200ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);

  /* ---- Photographic treatment ----
     Natural corporate: gentle desaturation for cohesion,
     lifted exposure. (The former dark-luxury grade is retired.) */
  --img-grade: saturate(0.8) contrast(1.04) brightness(1.06);
  /* Hero seat: how much navy scrim sits over hero photography */
  --hero-scrim: 28%;
  --hero-img-opacity: 0.96;

  /* ---- Header metrics ---- */
  --header-bar-block: 1.25rem;
  --header-bar-block-compressed: 0.75rem;

  /* ---- Contextual surface tokens: light defaults ----
     Re-scoped by the .surface-* classes below so every
     component is surface-agnostic and contrast-locked. */
  --surface: var(--paper-50);
  --surface-raised: var(--paper-100);
  --text: var(--text-on-light);
  --text-muted: var(--text-on-light-muted);
  --rule: var(--paper-200);
  --accent: var(--blue-600);          /* interactive */
  --accent-hover: var(--blue-500);
  --accent-display: var(--blue-600);  /* display-size numerals */
  --accent-detail: var(--bronze-500); /* thin lines, separators, markers */
  --btn-fg: var(--blue-600);          /* button outline/text */
  --btn-fill-text: var(--paper-50);   /* button text once filled on hover */
}

/* ============================================================
   Surface worlds
   Dark (navy) surfaces carry identity; light surfaces carry
   content.
   ============================================================ */

.surface-light {
  --surface: var(--paper-50);
  --surface-raised: var(--paper-100);
  --text: var(--text-on-light);
  --text-muted: var(--text-on-light-muted);
  --rule: var(--paper-200);
  --accent: var(--blue-600);
  --accent-hover: var(--blue-500);
  --accent-display: var(--blue-600);
  --accent-detail: var(--bronze-500);
  --btn-fg: var(--blue-600);
  --btn-fill-text: var(--paper-50);
  background-color: var(--surface);
  color: var(--text);
}

.surface-light-alt {
  --surface: var(--paper-100);
  --surface-raised: var(--paper-200);
  --text: var(--text-on-light);
  --text-muted: var(--text-on-light-muted);
  --rule: var(--paper-200);
  --accent: var(--blue-600);
  --accent-hover: var(--blue-500);
  --accent-display: var(--blue-600);
  --accent-detail: var(--bronze-500);
  --btn-fg: var(--blue-600);
  --btn-fill-text: var(--paper-50);
  background-color: var(--surface);
  color: var(--text);
}

.surface-dark {
  --surface: var(--navy-900);
  --surface-raised: var(--navy-800);
  --text: var(--text-on-dark);
  --text-muted: var(--text-on-dark-muted);
  --rule: var(--navy-800);
  --accent: var(--blue-300);
  --accent-hover: var(--text-on-dark);
  --accent-display: var(--bronze-500); /* display-size only (≥24px) */
  --accent-detail: var(--bronze-500);
  --btn-fg: var(--text-on-dark);
  --btn-fill-text: var(--navy-900);
  background-color: var(--surface);
  color: var(--text);
}

.surface-darkest {
  --surface: var(--navy-950);
  --surface-raised: var(--navy-800);
  --text: var(--text-on-dark);
  --text-muted: var(--text-on-dark-muted);
  --rule: var(--navy-800);
  --accent: var(--blue-300);
  --accent-hover: var(--text-on-dark);
  --accent-display: var(--bronze-500);
  --accent-detail: var(--bronze-500);
  --btn-fg: var(--text-on-dark);
  --btn-fill-text: var(--navy-900);
  background-color: var(--surface);
  color: var(--text);
}