/* ==========================================================================
   EJE DESIGN TOKENS — single source of truth for Web + Mobile App
   --------------------------------------------------------------------------
   Load this FIRST, before any component stylesheet:
     <link rel="stylesheet" href="assets/css/tokens.css">
     <link rel="stylesheet" href="assets/css/styles.css">   (web)
   The app links this file and drops its own inline :root.
   Contextual overrides (dark theme, high-contrast, a11y scaling, responsive
   header height) live in styles.css and override these base values in-context.
   No component may use a value outside this file.
   ========================================================================== */
:root {
  /* ---- Brand: gold ramp (CBA344 primary) --------------------------------
     CBA344 is light → use for FILLS with charcoal text; use --gold-700 for
     gold TEXT/ICONS on light backgrounds (WCAG AA safe). */
  --gold-50:  #fbf6ea;
  --gold-100: #f3e6c4;
  --gold-200: #e7d09a;
  --gold-400: #d9b85f;
  --gold-500: #cba344;   /* PRIMARY fill */
  --gold-600: #b58f31;   /* hover fill */
  --gold-700: #8a6a1e;   /* deep gold — text/icons on light (AA) */
  --gold-800: #6b521a;
  --gold-900: #5D3B26;   /* deep gold-brown (logo/header) */
  --gold-950: #361E12;   /* darkest gold-brown (wordmark) */

  /* ---- Charcoal — dark surfaces / headings ------------------------------ */
  --char-900: #1a1712;
  --char-800: #252019;
  --char-700: #332c22;

  /* ---- Brand aliases (primary → gold fills / charcoal dark) ------------- */
  --brand-50:  var(--gold-50);
  --brand-100: var(--gold-200);
  --brand-400: var(--gold-400);
  --brand-500: var(--gold-600);
  --brand-600: var(--gold-500);   /* primary */
  --brand-700: var(--gold-600);
  --brand-800: var(--char-800);
  --brand-900: var(--char-900);

  /* ---- Neutrals — warm ramp -------------------------------------------- */
  --ink-900: #1f1b14;
  /* Strong heading/value ink used as TEXT (not as a fill). = char-900 in light
     themes; the a11y dark-contrast theme remaps it to --ink-900 so this text
     follows the theme instead of staying dark-on-dark. Never use for backgrounds. */
  --ink-strong: var(--char-900);
  --ink-700: #3c3528;
  --ink-500: #6d6453;
  --ink-400: #8f8675;   /* CANONICAL muted (reconciled; app was #9a927f) */
  --ink-300: #b6ad9b;
  --line:    #ece6d8;   /* CANONICAL beige border (app was #ece4d2) */
  --line-2:  #f4efe4;
  --surface: #ffffff;   /* card white */
  --surface-2: #faf7ef; /* warm off-white */
  --surface-3: #f3ecdd; /* deeper warm */
  --bg:      #f4efe3;   /* app screen background */

  /* ---- Semantic (true state only — separate from the gold accent) ------ */
  --ok:    #1f8a5b;  --ok-bg:  #e7f4ee;
  --warn:  #b8862b;  --warn-bg:#fbf2dd;
  --err:   #b4392f;  --err-bg: #fae9e7;
  --info:  #2a6f97;  --info-bg:#e6f0f6;

  /* ---- Status vocabulary (request lifecycle) --------------------------- */
  --st-review: #5f7796;   --st-review-bg: #eef1f6;
  --st-pay: #b58f31;      --st-pay-bg: #f7efd8;
  --st-data: #c0892e;     --st-data-bg: #faf2df;
  --st-paused: #9a7a4a;   --st-paused-bg: #f3ecdf;
  --st-progress: #3f8f86; --st-progress-bg: #e8f3f1;
  --st-done: #1f8a5b;     --st-done-bg: #e7f4ee;
  --st-failed: #b4655c;   --st-failed-bg: #f6ece9;
  --st-cancelled: #8a8275;--st-cancelled-bg: #f1efe9;

  /* ---- Status text (foreground on the tinted badge background) --------- */
  --st-review-fg: #45556b;   --st-pay-fg: #7c5e1e;   --st-data-fg: #875e16;
  --st-paused-fg: #6f5530;    --st-progress-fg: #2c6a63; --st-done-fg: #176c47;
  --st-failed-fg: #8f463e;    --st-cancelled-fg: #645d50;

  /* ---- Extra golds (were hardcoded) ------------------------------------ */
  --gold-hi: #d9bd6e;   /* light gold highlight on dark surfaces */
  --on-gold: #1a1305;   /* near-black text/icons on gold fills */

  /* ---- UAE PASS brand -------------------------------------------------- */
  --upass: #00ac75;  --upass-2: #00915f;  --upass-bg: #e3f5ed;

  /* ---- Typography: families ------------------------------------------- */
  --font-en: "Cairo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-ar: "Cairo", "IBM Plex Sans", system-ui, sans-serif;
  --font-ar-title: "Cairo", system-ui, sans-serif;
  --font: var(--font-en);
  --font-num: var(--font);

  /* ---- Typography: type scale (rem → respects OS / Dynamic Type) ------- */
  --fs-xs:   0.75rem;    /* 12 — captions, badges */
  --fs-sm:   0.8125rem;  /* 13 — labels, meta */
  --fs-base: 0.9375rem;  /* 15 — body */
  --fs-md:   1rem;       /* 16 */
  --fs-lg:   1.125rem;   /* 18 — lead */
  --fs-xl:   1.375rem;   /* 22 — card / section title */
  --fs-2xl:  1.75rem;    /* 28 — page title */
  --fs-3xl:  2.25rem;    /* 36 — hero */
  --fs-display: clamp(2rem, 5vw, 3rem);
  --lh-tight: 1.1;  --lh-snug: 1.3;  --lh-normal: 1.5;  --lh-relaxed: 1.7;
  --fw-regular: 400;  --fw-medium: 500;  --fw-semibold: 600;  --fw-bold: 700;  --fw-heavy: 800;

  /* ---- Radius — ONE scale (reconciled: app 12/22 → 10/18) -------------- */
  --r-xs: 8px;
  --r-sm: 10px;
  --r-tile: 12px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;      /* reconciled (was defined 26 then 24) */
  --r-pill: 999px;
  --r: var(--r-lg);  /* app alias — its main radius = 18 */

  /* ---- Card DNA (canonical card primitive — any card composes from this) */
  --card-bg: var(--surface);
  --card-border: var(--line);
  --card-radius: var(--r-lg);
  --card-shadow: var(--sh-1);
  --card-pad: 20px;

  /* ---- Spacing — 4px base --------------------------------------------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;  --sp-5: 20px;
  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

  /* ---- Shadows — brand-tinted, one set (reconciled) ------------------- */
  --sh-1: 0 1px 2px rgba(40,32,14,.05);
  --sh-2: 0 4px 16px rgba(40,32,14,.07), 0 1px 3px rgba(40,32,14,.05);
  --sh-3: 0 24px 50px -14px rgba(40,32,14,.17), 0 8px 18px -10px rgba(40,32,14,.10);
  --sh-gold: 0 10px 30px rgba(176,137,63,.30);

  /* ---- Motion --------------------------------------------------------- */
  --ease: cubic-bezier(.16, 1, .3, 1);          /* web default */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-island: cubic-bezier(.32, .72, 0, 1);  /* iOS-style (app motion) */

  /* ---- Rhythm / layout ------------------------------------------------ */
  --container: 1440px;
  --gutter: clamp(20px, 5vw, 56px);
  --section-y: clamp(72px, 9vw, 132px);
  --header-h: 153px;

  /* ---- Z-index scale -------------------------------------------------- */
  --z-fab: 40;  --z-header: 50;  --z-menu: 60;  --z-popover: 200;  --z-modal: 300;

  /* ---- Accessibility -------------------------------------------------- */
  --a11y-font-scale: 1;

  /* ---- Breakpoints (reference — CSS can't read vars in @media) ---------
     sm 640 · md 768 · lg 1024 · xl 1280 */
}