/* ============================================================
   tokens.css — Baloot Game shared design system
   Single source of truth for color, spacing, radius, type, and
   elevation tokens. Plain CSS, no build step, no @font-face here
   (font arrives via the Google Fonts <link> wired in each page;
   this file only names the family + fallback stack below).

   Two visual contexts, one token set:
   - Site Chrome (index/rules/calculator + shared header/nav/footer):
     fully light/dark togglable via html[data-theme="dark"].
   - Game Table (play.html center stage): constant dark felt
     surface regardless of the toggle — no light mode, by design
     (see UI-SPEC.md "Identity Concept"). Felt tokens below live
     in :root only and are never overridden in the dark block.
   ============================================================ */

:root {
  /* ---- Site Chrome — Light ---- */
  --color-canvas:#F7F3EA;
  --color-brand:#0F6B4C;
  --color-accent:#C89B3C;
  --color-destructive:#C0392B;
  --color-surface:#FFFFFF;
  --color-ink:#1C231F;
  --color-muted:#5B6660;
  --color-border:#E4DDD0;
  --color-on-brand:#FFFFFF;
  --color-on-accent:#1C231F;
  --color-success:#2F9E5B;

  /* ---- Game Table constants (NOT theme-dependent — felt has no light mode) ----
     بند 52: هوية بيج/بني (نمط «كملنا») بدل الأخضر — نفس المتغيرات، قيم جديدة بس،
     فباقي game.css ما يحتاج يلمس (كله يقرأ من هالمتغيرات). */
  /* جوخة خضراء فاخرة بنمط طاولة البلوت (كملنا) بدل البيج/البني — الأخضر لون طاولة الورق
     الكلاسيكي، يتناغم مع هوية الموقع (أخضر + ذهبي)، ونص اللعبة الأبيض/الذهبي يبقى مقروء فوقه. */
  --felt-outer-from:#1B7A50;
  --felt-outer-to:#0A3B27;
  --felt-mat-from:#166B45;
  --felt-mat-to:#0B3A26;
  --felt-trim:#D8B563;
  --felt-panel:#0C2E20;
  --felt-danger:#C0392B;
  --felt-success:#7BE0A6;
  --felt-ink:#FFFFFF;
  --felt-label:#ffe9a8;
  --felt-hint:#cfe6d6;
  /* تدرّج خلفية الشريط العلوي/الفوتر/الحوارات — أخضر غامق شبه أسود يتناغم مع الجوخة */
  --felt-chrome-from:rgba(9,42,28,.95);
  --felt-chrome-to:rgba(6,30,20,.88);
  /* خلفية فوتر ساحة اللعب (#footer-bar): تدرّج الجوخة الأخضر. */
  --footer-bg:linear-gradient(180deg, var(--felt-chrome-from), var(--felt-chrome-to));

  /* ---- بند 44: مدد أنيميشن موحّدة — نفس القيم المستخدمة سابقاً بس بمصدر واحد، فأي ضبط
     مستقبلي للإيقاع (توزيع/جمع أكلة/طيران ورق) يصير من مكان واحد بدل تكرار الرقم بكل قاعدة ---- */
  --anim-fast:0.3s;
  --anim-med:0.4s;
  --anim-slow:0.5s;
  --anim-spring:cubic-bezier(.4,0,.2,1);

  /* ---- Spacing scale (multiples of 4) ---- */
  --space-xs:4px;
  --space-sm:8px;
  --space-md:16px;
  --space-lg:24px;
  --space-xl:32px;
  --space-2xl:48px;
  --space-3xl:64px;

  /* ---- Radius ---- */
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:12px;
  --radius-xl:16px;
  --radius-pill:999px;

  /* ---- Typography ----
     Exactly 2 weights system-wide: 400 (regular) for running text,
     700 (bold) for every heading/label/badge/button. Never
     introduce a 500/600/800 weight. */
  --font-sans:"Cairo","Segoe UI",Tahoma,sans-serif;
  --type-label:14px;
  --type-body:16px;
  --type-heading:20px;
  --type-display:28px;
  --lh-body:1.6;
  --lh-heading:1.25;

  /* ---- Elevation & depth ---- */
  --elev-raised:0 2px 8px rgba(0,0,0,.10);
  --elev-floating:0 10px 30px rgba(0,0,0,.4);
  --elev-felt-inset:inset 0 0 30px rgba(0,0,0,.45);

  /* ---- Touch target ---- */
  --touch-min:44px;

  /* ---- Responsive breakpoints (documented only — actual media
     queries live in the page stylesheets, not here):
     Mobile (default): < 600px
     Tablet:            600px – 1023px
     Desktop:           >= 1024px ---- */

  /* ---- Legacy aliases (safety net so any un-migrated reference
     in style.css/game.css still resolves to the new tokens) ---- */
  --green:var(--color-brand);
  --green-dark:#0b4d34;
  --gold:var(--color-accent);
  --cream:var(--color-canvas);
  --text:var(--color-ink);
  --card-bg:var(--color-surface);
  --border-soft:var(--color-border);
  --felt:var(--felt-outer-from);
  --felt-dark:var(--felt-outer-to);
}

html[data-theme="dark"] {
  /* ---- Site Chrome — Dark ---- */
  --color-canvas:#0E1613;
  --color-brand:#123024;
  --color-accent:#D8B563;
  --color-destructive:#E0564A;
  --color-surface:#17211C;
  --color-ink:#F0EBE0;
  --color-muted:#9CA69E;
  --color-border:#2B3A33;
  --color-on-brand:#F0EBE0;
  --color-on-accent:#1C1712;

  /* ---- Elevation override (deeper shadow reads correctly on dark surfaces) ---- */
  --elev-raised:0 2px 8px rgba(0,0,0,.35);

  /* ---- Legacy aliases mirrored for theme-sensitive tokens ---- */
  --green:var(--color-brand);
  --cream:var(--color-canvas);
  --text:var(--color-ink);
  --card-bg:var(--color-surface);
  --border-soft:var(--color-border);
}

/* ============================================================
   App chrome tokens (menu / settings / dialogs / calculator).
   Themeable at runtime via html[data-app-theme]. Default = Green
   (رَصَّة identity: deep green felt + gold). "black" = the same
   layout/effects recolored to an eye-comfortable blackish-green
   (NO pure-black here — that OLED option is calculator-only).
   ============================================================ */
:root {
  --app-bg-a:#17402d;   /* top glow of the page radial */
  --app-bg-b:#0e281c;
  --app-bg-c:#07130d;
  --app-stage-glow:#0f6b4c;   /* felt glow inside the stage */
  --app-panel-a:#123024;      /* raised surfaces (chips/cards/dialogs) top */
  --app-panel-b:#0b2318;      /* ...bottom */
  --app-panel-3:#0e2a1f;      /* flat panels (history widget) */
  --app-border:#245a41;
  --app-ink:#eaf5ee;          /* primary text on dark */
  --app-muted:#9fbcac;        /* secondary text */
  --app-accent:#ffd766;       /* gold accent (headings/values) */
  --app-accent-2:#e0a02a;
  --app-accent-ink:#1a1206;   /* ink on gold */
  --app-green:#159b5c;        /* green CTA */
  --app-green-2:#4bd08a;
  --app-danger:#e0564a;
  /* Button shape toggle (Settings): rounded default, 6px = square */
  --btn-radius:16px;
  /* Card-back selector default (see game.css .backs / #hand rendering) */
  --card-back:red;
}
html[data-app-theme="black"] {
  --app-bg-a:#1c211d;
  --app-bg-b:#111512;
  --app-bg-c:#080a09;
  --app-stage-glow:#20342a;   /* barely-there dark glow — reads black, not green */
  --app-panel-a:#1a1f1b;
  --app-panel-b:#12160f;
  --app-panel-3:#171c18;
  --app-border:#2e3a32;
  --app-ink:#eef2ef;
  --app-muted:#9aa8a0;
  /* gold + green accents stay (they read well on both) */
}

/* Global: brand background + no rubber-band overscroll (PWA feel) */
html, body {
  background-color: var(--app-bg-c);
  overscroll-behavior: none;
}