/* Ansen — design tokens.
   Dark is the default theme (base.html sets data-theme="dark");
   [data-theme="light"] is the warm-paper alternative. */

:root {
  /* ---- Colour: ink surfaces ---- */
  --ink: #0a1a2b;
  --ink-2: #0d2033;
  --surface-1: #12293c;
  --surface-2: #17334a;
  --surface-3: #1e3b55;
  /* Chip behind client/factory logos, which ship as white-background art. */
  --paper: #f2f0ec;

  /* ---- Colour: hairlines ---- */
  --line: #22384e;
  --line-strong: #33526f;
  --line-faint: rgba(232, 238, 244, 0.06);

  /* ---- Colour: sticky header glass ---- */
  --header-glass: rgba(10, 26, 43, 0.68);
  --header-glass-strong: rgba(13, 32, 51, 0.84);
  /* The mobile dropdown is a large panel over arbitrary content, so it runs
     more opaque than the 76px bar — the blur is a finish, not the legibility. */
  --sheet-glass: rgba(13, 32, 51, 0.94);
  --header-shadow: 0 10px 26px -22px rgba(2, 10, 18, 0.95);

  /* ---- Colour: text ---- */
  --text-1: #e8eef4;
  --text-2: #a7b8c9;
  --text-3: #8fa6ba;

  /* ---- Colour: accent (orange, from the logo) ---- */
  --accent: #e2691b;
  --accent-hover: #f07c2e;
  /* Text-sized accent. Lifted off --accent so small orange labels clear 4.5:1
     on the card surface; --accent itself stays for fills and hairlines. */
  --accent-ink: #ee7d31;
  /* Legible foreground when --accent is used as a fill. */
  --on-accent: #0a1a2b;
  --accent-soft: rgba(226, 105, 27, 0.13);
  --accent-line: rgba(226, 105, 27, 0.34);

  /* ---- Colour: state ---- */
  --success: #2fbf71;
  --success-ink: #2fbf71;
  --success-soft: rgba(47, 191, 113, 0.12);
  --success-line: rgba(47, 191, 113, 0.3);
  --danger: #ef6a6a;
  /* #ef6a6a only reached 4.28:1 on the tinted .alert-error plate; this clears
     AA at 5:1 while staying the same hue. */
  --danger-ink: #f57d7d;
  --danger-soft: rgba(239, 106, 106, 0.12);
  --danger-line: rgba(239, 106, 106, 0.32);

  /* ---- Field / overlay ---- */
  --field: rgba(4, 14, 24, 0.55);
  --scrim: rgba(4, 12, 20, 0.8);

  /* ---- Elevation: only where something floats ---- */
  --shadow-1: 0 1px 2px rgba(2, 10, 18, 0.4);
  --shadow-2: 0 10px 30px -8px rgba(2, 10, 18, 0.55);
  --shadow-3: 0 30px 70px -16px rgba(2, 10, 18, 0.7);

  /* ---- Typography ---- */
  --font-display: "Space Grotesk", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-body: "Inter", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-ar: "IBM Plex Sans Arabic", "Inter", system-ui, sans-serif;

  --fs-display: clamp(2.5rem, 5.2vw, 3.75rem);
  --fs-h1: clamp(2rem, 3.8vw, 2.875rem);
  --fs-h2: clamp(1.625rem, 2.6vw, 2.125rem);
  --fs-h3: 1.125rem;
  --fs-lead: clamp(1.0625rem, 1.4vw, 1.1875rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;
  --fs-kicker: 0.6875rem;

  --lh-tight: 1.08;
  --lh-head: 1.18;
  --lh-body: 1.62;
  --lh-loose: 1.72;

  --tr-tight: -0.02em;
  --tr-kicker: 0.16em;

  /* ---- Space: 4px scale ---- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  --gutter: clamp(1.25rem, 4vw, 2rem);
  --maxw: 1200px;
  --maxw-text: 62ch;
  --section-pad: clamp(4rem, 9vw, 7rem);
  --section-pad-sm: clamp(2.75rem, 6vw, 4.5rem);

  /* ---- Radius ---- */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* ---- Motion ---- */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ---- Component metrics ---- */
  --header-h: 76px;
  --header-blur: 14px;
  --hair: 1px;
}

[data-theme="light"] {
  --ink: #f6f1e8;
  --ink-2: #efe8dc;
  --surface-1: #ffffff;
  --surface-2: #fbf8f2;
  --surface-3: #f2ece1;
  --paper: #ffffff;

  --line: rgba(10, 26, 43, 0.13);
  --line-strong: #ded3c0;
  --line-faint: rgba(10, 26, 43, 0.07);

  --header-glass: rgba(246, 241, 232, 0.72);
  --header-glass-strong: rgba(239, 232, 220, 0.88);
  --sheet-glass: rgba(239, 232, 220, 0.96);
  --header-shadow: 0 10px 26px -22px rgba(10, 26, 43, 0.38);

  --text-1: #0a1a2b;
  --text-2: #33475c;
  --text-3: #4e6174;

  --accent: #e2691b;
  --accent-hover: #c8571a;
  --accent-ink: #a8480d;
  --on-accent: #0a1a2b;

  --success: #1fa855;
  --success-ink: #157347;
  --success-soft: rgba(31, 168, 85, 0.1);
  --success-line: rgba(31, 168, 85, 0.28);
  --danger: #c62f2f;
  --danger-ink: #b3261e;
  --danger-soft: rgba(198, 47, 47, 0.09);
  --danger-line: rgba(198, 47, 47, 0.26);

  --field: #ffffff;
  --scrim: rgba(24, 20, 14, 0.42);

  --shadow-1: 0 1px 2px rgba(10, 26, 43, 0.06);
  --shadow-2: 0 10px 30px -10px rgba(10, 26, 43, 0.16);
  --shadow-3: 0 30px 70px -20px rgba(10, 26, 43, 0.24);
}