/* Mafia Stage design system, tokens.
   Source of truth is tokens.json; this file is its CSS form. Dark only.
   Two registers (stage, chrome) share every token here; the registers differ in how they use them, see README. */

:root {
  /* ---------- colour: grounds (the floor and what stands on it) ---------- */
  --stage: #0b0a09;        /* the floor. Warm near-black, never pure black. */
  --smoke: #171412;        /* the first thing raised off the floor: chrome panels, the God's desk, inputs at rest */
  --haze: #272220;         /* hover and pressed grounds, a second level in chrome */
  --mist: #3a332e;         /* dividers and quiet strokes; never text */

  /* ---------- colour: ink (text and icons) ---------- */
  --ink: #f3ecdf;          /* primary text. Warm off-white. 16.8:1 on stage */
  --dim: #aca293;          /* secondary text. 7.9:1 on stage, 6.3:1 on haze */
  --faint: #8a8072;        /* captions, placeholders, disabled. 5.1:1 on stage, 4.7 on smoke, 4.05 on haze: never body text on haze */

  /* ---------- colour: semantic (every one has a job; nothing else is coloured) ---------- */
  --spotlight: #f5c35a;        /* the brand. The light: current speaker, the brand action, the focus ring, the level ring */
  --spotlight-deep: #c08a1e;   /* spotlight on a darker setting: timer arc track, pressed primary, large glow cores. 6.5:1 on stage as text */
  --mafia: #ee5960;            /* the mafia team, inside private mafia UI and the God's ledger only. 5.9:1 on stage, 4.7 on haze */
  --mafia-deep: #a4262b;       /* mafia rings, bands and glows; never text */
  --go: #3dcc74;               /* the one action that moves the game forward: confirm, vote, ready, announce. 9.5:1 on stage */
  --go-deep: #1f8f4a;          /* pressed go, go progress tracks; never text */
  --live: #3dcc74;             /* on air. Same hue as go by decision (one green), its own token so it can diverge later */
  --danger: #ff6a4a;           /* leave, kick, end, delete. Text and edge only, never a fill. 7.0:1 on stage */
  --danger-deep: #b6412c;      /* danger edge on hover; never text */

  /* on-colour text: fills take stage-coloured text, never ink */
  --on-spotlight: var(--stage);   /* 12.1:1 */
  --on-go: var(--stage);          /* 9.5:1 */
  --on-ink: var(--stage);         /* 16.8:1 */

  /* ---------- light (replaces borders, cards and most shadows) ---------- */
  --edge: inset 0 0 0 1px rgb(243 236 223 / 0.08);          /* the faint light edge that defines a shape */
  --edge-strong: inset 0 0 0 1px rgb(243 236 223 / 0.16);   /* an edge that must be seen (secondary button, focused panel) */
  --edge-colour: rgb(243 236 223 / 0.08);                   /* same value as a plain colour, for 1px rules */
  --light-spot: radial-gradient(ellipse 60% 55% at 50% 0%, rgb(245 195 90 / 0.22) 0%, rgb(245 195 90 / 0.07) 40%, transparent 72%);
  --light-pool: radial-gradient(ellipse 50% 50% at 50% 35%, rgb(245 195 90 / 0.12), transparent 70%); /* under a prop */
  --light-night: radial-gradient(ellipse 70% 60% at 50% 0%, rgb(120 140 190 / 0.10), transparent 70%); /* a cold, faint moon */
  --glow-spotlight: 0 0 0 2px var(--spotlight), 0 0 28px rgb(245 195 90 / 0.45);
  --glow-spotlight-soft: 0 0 40px rgb(245 195 90 / 0.25);
  --glow-mafia: 0 0 0 2px var(--mafia), 0 0 24px rgb(238 89 96 / 0.40);
  --glow-go: 0 0 0 2px var(--go), 0 0 20px rgb(61 204 116 / 0.35);
  --ring-ink: 0 0 0 2px var(--ink);
  --ring-focus: 0 0 0 2px var(--stage), 0 0 0 4px var(--spotlight);   /* keyboard focus, 3:1 on every ground */
  --shadow-prop: 0 30px 60px rgb(0 0 0 / 0.65), 0 8px 16px rgb(0 0 0 / 0.35);  /* a role card, a lifted face */
  --shadow-chrome: 0 10px 28px rgb(0 0 0 / 0.45);                               /* menus, toasts, sheets */
  --vignette: radial-gradient(ellipse 80% 70% at 50% 40%, transparent 55%, rgb(0 0 0 / 0.55) 100%);
  --grain-opacity: 0.06;   /* the fixed grain layer; 0 on phones and on data-perf="low" */

  /* ---------- space (8 pt) ---------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;

  /* ---------- radius ---------- */
  --radius-s: 6px;     /* chrome chips, small inputs */
  --radius-m: 10px;    /* buttons, inputs, chrome panels */
  --radius-l: 16px;    /* seats, stage panels, sheets */
  --radius-xl: 24px;   /* role card, the stage speaker frame */
  --radius-pill: 999px;
  --radius-round: 50%;

  /* ---------- sizes that recur ---------- */
  --tap: 44px;             /* minimum hit target */
  --control-m: 40px;       /* chrome control height */
  --control-l: 52px;       /* stage control height */
  --seat-min: 88px;        /* the smallest a seat may be */
  --rail: 64px;            /* side rail width */
  --topnav: 56px;

  /* ---------- motion ---------- */
  --dur-blink: 120ms;    /* a state flips: pressed, checked */
  --dur-quick: 200ms;    /* hover, focus, toggles */
  --dur-settle: 320ms;   /* a vote lands, a toast enters, a sheet opens */
  --dur-scene: 900ms;    /* the speaker changes, a phase word changes */
  --dur-night: 1600ms;   /* night falls, day breaks */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-stage: cubic-bezier(0.65, 0, 0.35, 1);   /* slow in, slow out: curtains and lights */
  --ease-land: cubic-bezier(0.2, 0.9, 0.3, 1.15);  /* a small overshoot: a vote lands on a seat */

  /* ---------- type: families switch by lang, see base.css ---------- */
  --font-display-fa: "Lalezar", "Vazirmatn", system-ui, sans-serif;
  --font-display-en: "Anton", "Inter", system-ui, sans-serif;
  --font-body-fa: "Vazirmatn", "Inter", system-ui, sans-serif;   /* Vazirmatn here is the Non-Latin build; Latin inside Persian text falls through to Inter */
  --font-body-en: "Inter", system-ui, sans-serif;
  --weight-body: 400;
  --weight-medium: 500;
  --weight-strong: 700;

  /* type scale, two columns. Display sizes differ because Lalezar's letters sit lower in the em than Anton's caps;
     the Latin runs at 0.72 of the Persian size so Anton's caps sit a hair above Lalezar's tall letters and the two lines carry the same mass. Body sizes are shared. */
  --size-display-xl-fa: 96px;  --size-display-xl-en: 70px;
  --size-display-l-fa: 64px;   --size-display-l-en: 46px;
  --size-display-m-fa: 44px;   --size-display-m-en: 32px;
  --size-display-s-fa: 32px;   --size-display-s-en: 24px;
  --size-title: 24px;
  --size-heading: 18px;
  --size-body-l: 18px;
  --size-body: 16px;
  --size-body-s: 14px;
  --size-caption: 13px;
  --size-micro: 11px;        /* seat labels at 88 px, nothing else */
  --leading-display: 1.0;
  --leading-display-fa: 1.08;
  --leading-body-fa: 1.8;
  --leading-body-en: 1.55;
  --leading-tight-fa: 1.5;
  --leading-tight-en: 1.3;
  --tracking-display-en: 0.01em;

  /* ---------- z ---------- */
  --z-stage: 0; --z-seat: 1; --z-panel: 10; --z-sheet: 20; --z-toast: 30; --z-focus: 40;
}

/* Night is a tint of the same grounds, not a second theme. Applied on the stage root with data-phase="night". */
[data-phase="night"] {
  --stage: #07080c;
  --smoke: #10121a;
  --haze: #1b1e2a;
  --mist: #2a2e3c;
  --light-spot: var(--light-night);
  --vignette: radial-gradient(ellipse 80% 70% at 50% 40%, transparent 40%, rgb(0 0 0 / 0.7) 100%);
}

/* Low-end devices and weak connections: no grain, no blur, lighter glows. Set by the app from a device check. */
[data-perf="low"] {
  --grain-opacity: 0;
  --glow-spotlight: 0 0 0 2px var(--spotlight);
  --glow-mafia: 0 0 0 2px var(--mafia);
  --glow-go: 0 0 0 2px var(--go);
  --shadow-prop: 0 12px 24px rgb(0 0 0 / 0.5);
}