/*
  tokens.css — DAL Website (HTML/CSS/JS rebuild)

  Extracted verbatim from the approved master project's design system:
    app/globals.css   (colors, easing)
    lib/fonts.ts       (font stacks)
    components/**      (radii, shadows, durations, z-index, container
                         widths actually used)

  No new palette or scale was invented. Values not explicitly present in
  the master project (e.g. an unused spacing step) are intentionally left
  out rather than guessed.
*/

:root {
  /* ---- Color — dark (default) theme ---- */
  --color-void: #07111a;
  --color-surface: #091620;
  --color-surface-2: #111a22;
  --color-surface-3: #15212b;
  --color-hairline: rgba(241, 239, 234, 0.1);
  --color-hairline-strong: rgba(241, 239, 234, 0.18);

  --color-ink: #f1efea;
  --color-muted: #9ba1a6;
  --color-faint: #6c7378;

  --color-accent: #d71920;
  --color-accent-dim: #7b0d12;
  --color-accent-glow: rgba(215, 25, 32, 0.16);

  /* ---- Typography — font stacks ----
     Self-hosted variable fonts (see assets/fonts/ + base.css @font-face).
     EN body: Inter · EN display: Bricolage Grotesque
     AR body + display: Cairo (single family, two weight ranges) */
  --font-en-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-en-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-ar-body: "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ar-display: "Cairo", system-ui, sans-serif;

  --font-body: var(--font-en-body);
  --font-display: var(--font-en-display);

  /* ---- Motion ---- */
  --ease-editorial: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration-fast: 200ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;
  --duration-slower: 700ms;

  /* ---- Radii (as used across cards, pills, hero art) ---- */
  --radius-sm: 0.5rem;    /* rounded-lg   — logo tiles */
  --radius-md: 1rem;      /* rounded-2xl  — partner logo cards */
  --radius-lg: 1.5rem;    /* rounded-3xl  — capability panels */
  --radius-xl: 1.75rem;   /* rounded-[28px] — CTA / hero panels */
  --radius-2xl: 2rem;     /* rounded-[32px] — capability stage panel */
  --radius-pill: 9999px;  /* rounded-full — buttons, badges, dots */

  /* ---- Shadows (accent-tinted, used on CTAs / glow accents) ---- */
  --shadow-cta: 0 16px 30px rgba(215, 25, 32, 0.25);
  --shadow-panel: 0 40px 80px rgba(7, 17, 26, 0.45);

  /* ---- Container widths (Tailwind max-w-* scale actually used) ---- */
  --container-sm: 24rem;    /* max-w-sm */
  --container-md: 28rem;    /* max-w-md */
  --container-lg: 32rem;    /* max-w-lg */
  --container-xl: 36rem;    /* max-w-xl */
  --container-2xl: 42rem;   /* max-w-2xl */
  --container-3xl: 48rem;   /* max-w-3xl */
  --container-4xl: 56rem;   /* max-w-4xl */
  --container-5xl: 64rem;   /* max-w-5xl */
  --container-marquee: 1320px; /* partner marquee heading wrapper */
  --container-shell: 1320px; /* header / footer / mobile-nav / page shell — confirmed
                                 in components/layout/{Header,Footer,MobileNavigation}.tsx:
                                 every one uses w-[92%] max-w-[1320px] */

  /* ---- z-index layers ---- */
  --z-header: 50;
  --z-overlay: 60;

  color-scheme: dark;
}

/*
  Scoped light-theme override — used by the homepage's "light chapter"
  (Capability Universe section) via a wrapper class, exactly as the
  master project's `.on-light` / `.on-dark-inset` pattern works: every
  color token flips inside the wrapper without new class names needed.
*/
.on-light {
  --color-void: #f4f3ef;
  --color-surface: #ffffff;
  --color-surface-2: #ffffff;
  --color-surface-3: #eeece5;
  --color-hairline: rgba(16, 14, 12, 0.1);
  --color-hairline-strong: rgba(16, 14, 12, 0.18);
  --color-ink: #131110;
  --color-muted: #5b564e;
  --color-faint: #8c8579;
  color-scheme: light;
}

.on-dark-inset {
  --color-void: #07111a;
  --color-surface: #091620;
  --color-surface-2: #111a22;
  --color-surface-3: #15212b;
  --color-hairline: rgba(241, 239, 234, 0.1);
  --color-hairline-strong: rgba(241, 239, 234, 0.18);
  --color-ink: #f1efea;
  --color-muted: #9ba1a6;
  --color-faint: #6c7378;
  color-scheme: dark;
}

/* Arabic pages switch the body/display stacks to Cairo. */
html[lang="ar"] {
  --font-body: var(--font-ar-body);
  --font-display: var(--font-ar-display);
}