/* ==========================================================================
   دور كمان — design tokens
   Mirrors lib/theme/tokens.dart (AppPalette). Two modes, ONE geometry:
   «كلاكيت» (cinema near-black, borderless, type-led) and «ورق دمغة»
   (bone paper, hairline-separated, printed). Same radii, spacing and sizes
   in both — only colour and the presence of a hairline change, so flipping
   the theme never shifts a single pixel.

   Colour is SEMANTIC. Components name roles, never hues. No stylesheet
   below this one may contain a palette hex. The only exceptions are the fixed
   GAME SIGNALS listed at the bottom of this file, the black a drawn object
   keeps as its own ink, and `#000` used inside color-mix() to darken a fill
   into its own press shadow — each one is commented where it appears.
   ========================================================================== */

/* --------------------------------------------------------------------------
   «ورق دمغة» — light. Declared on :root so it is the base every override
   layers on top of.
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  --bg: #ede7da;
  --surface: #f6f1e6;
  --elevated: #fffbf0;
  --on-bg: #17150f;
  --muted: #5c574c;              /* 5.8:1 on bg · 6.4:1 on surface */
  --accent: #c8402c;
  --on-accent: #fff6ee;          /* 4.6:1 on accent */
  --positive: #1e7a4c;
  --on-positive: #f2fbf5;

  --hairline: rgba(23, 21, 15, 0.14);
  --border: rgba(23, 21, 15, 0.14);
  --shadow-tint: rgba(23, 21, 15, 0.06);
  --glow: rgba(200, 64, 44, 0.12);

  /* Bone-on-bone cannot separate itself, so light mode gets a real outline
     and a real drop shadow. Both collapse to nothing in dark. */
  --card-shadow: 0 1px 2px var(--shadow-tint), 0 14px 34px var(--shadow-tint);
  --card-lift: 0 2px 6px var(--shadow-tint), 0 26px 54px var(--shadow-tint);

  /* Accent is 4.0:1 as small type on bone paper — under AA. This is the
     same signal pushed dark enough to be TYPE (5.8:1 on bg). */
  --accent-ink: #a32e1e;
}

/* --------------------------------------------------------------------------
   «كلاكيت» — dark. Applied when the visitor's system asks for dark AND they
   have not explicitly chosen light. boot.js additionally stamps
   data-theme="dark" when the browser reports no preference at all, because
   dark is the app's default.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #0c0d10;
    --surface: #16181d;
    --elevated: #1e2128;
    --on-bg: #f4f3f0;
    --muted: #8e9299;            /* 6.2:1 on bg · 5.8:1 on surface */
    --accent: #ff5a3c;
    --on-accent: #160603;        /* 6.4:1 on accent */
    --positive: #3dd68c;
    --on-positive: #06210f;

    --hairline: rgba(255, 255, 255, 0.08);
    /* Declared-but-invisible so the 1px inset is identical in both modes
       and nothing reflows on toggle. An outline on near-black reads as a
       seam, so dark mode has neither border nor shadow. */
    --border: transparent;
    --shadow-tint: transparent;
    --glow: rgba(255, 90, 60, 0.18);

    --card-shadow: none;
    --card-lift: none;

    --accent-ink: var(--accent);  /* 6.3:1 on bg — already type-grade */
  }
}

/* An explicit choice wins over the system in BOTH directions. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0c0d10;
  --surface: #16181d;
  --elevated: #1e2128;
  --on-bg: #f4f3f0;
  --muted: #8e9299;
  --accent: #ff5a3c;
  --on-accent: #160603;
  --positive: #3dd68c;
  --on-positive: #06210f;

  --hairline: rgba(255, 255, 255, 0.08);
  --border: transparent;
  --shadow-tint: transparent;
  --glow: rgba(255, 90, 60, 0.18);

  --card-shadow: none;
  --card-lift: none;

  --accent-ink: var(--accent);
}

:root {
  /* ---- Type ------------------------------------------------------------- */
  --font-display: "Lalezar", "Baloo Bhaijaan 2", "Tahoma", system-ui, sans-serif;
  --font-body: "Rubik", "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;

  --text-micro: clamp(0.72rem, 0.7rem + 0.1vw, 0.8rem);
  --text-sm: clamp(0.84rem, 0.8rem + 0.15vw, 0.94rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.14rem);
  --text-lead: clamp(1.1rem, 1rem + 0.6vw, 1.4rem);
  --text-h3: clamp(1.35rem, 1.15rem + 0.9vw, 1.9rem);
  --text-h2: clamp(2rem, 1.4rem + 2.6vw, 3.6rem);
  --text-h1: clamp(2.9rem, 1.5rem + 6.4vw, 7rem);
  --text-numeral: clamp(3rem, 2rem + 5vw, 5.5rem);

  --leading-tight: 1.02;
  --leading-snug: 1.28;
  --leading-body: 1.72;

  /* ---- Space ------------------------------------------------------------ */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;
  --space-xl: 3.25rem;
  --space-2xl: 5rem;
  --space-section: clamp(4rem, 2.5rem + 7vw, 9rem);
  --gutter: clamp(1.15rem, 0.6rem + 2.6vw, 3rem);
  --measure: 62ch;
  --shell: 1220px;

  /* ---- Geometry — one scale, identical in both modes -------------------- */
  --radius: 6px;
  --radius-pill: 999px;
  --hair: 1px;
  --press: 5px;              /* PressButton travel, same as the app */
  --checker: 13px;

  /* ---- Motion ----------------------------------------------------------- */
  --dur-fast: 140ms;
  --dur-normal: 320ms;
  --dur-slow: 720ms;
  --dur-reveal: 820ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.42, 0.44, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* Live values written by JS (the spotlight tracking scroll).
     Safe defaults so the page is correct with JS off. */
  --spot-x: 50%;
  --spot-y: 20%;

  /* Mirrors the physical direction of decorative offsets under RTL. */
  --push: 1;

  /* ---- Sanctioned non-palette colours ----------------------------------
     docs/DESIGN.md: a few colours must stay FIXED in both modes because
     they are game signals, not brand. They live outside AppPalette in the
     app for exactly this reason, and they appear here only inside the mode
     illustrations — never as page chrome, and never behind body copy. */
  --team-red: #d93a2b;
  --team-blue: #2a6f97;
  --heat-cool: #2e8b57;
  --heat-warm: #e07a00;
  --heat-hot: #e0452b;
}

[dir="rtl"] {
  --push: -1;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-normal: 1ms;
    --dur-slow: 1ms;
    --dur-reveal: 1ms;
  }
}