/*
 * PhoneRemo design tokens (spec §9.2). The values are normative: WP4 may add
 * tokens but never change these. Dark is the default theme; the landing page
 * may opt a section into [data-theme="light"].
 */
:root {
  /* palette */
  --ink-950:#07080D; --ink-900:#0C0E16; --ink-850:#11141F; --ink-800:#161A28; --ink-700:#1F2436;
  --ink-600:#2B3149; --ink-500:#434A66; --ink-400:#6B7394; --ink-300:#959CB8; --ink-200:#BFC4DA;
  --ink-100:#E3E6F1; --ink-50:#F5F6FB;
  --violet-300:#B3A9FF; --violet-400:#8E80FF; --violet-500:#6C5CFF; --violet-600:#5546E8; --violet-700:#4033C2;
  --mint-400:#5CF7D2; --mint-500:#2EF2C2; --mint-600:#14C99E;
  --rose-500:#FF5C8A; --amber-500:#FFC24B; --sky-500:#3DA9FF; --orange-500:#FF8A3D; --lime-500:#B6F23D; --magenta-500:#E05CFF;
  --red-500:#FF4D5E;

  /* semantic (dark default) */
  --bg:var(--ink-950); --bg-elevated:var(--ink-900);
  --surface:var(--ink-850); --surface-2:var(--ink-800); --surface-3:var(--ink-700);
  --border:color-mix(in oklab, var(--ink-300) 16%, transparent); --border-strong:var(--ink-600);
  --text:var(--ink-50); --text-muted:var(--ink-300); --text-faint:var(--ink-400);
  --accent:var(--violet-500); --accent-hover:var(--violet-400); --accent-press:var(--violet-600);
  --on-accent:#FFFFFF; --signal:var(--mint-500); --success:var(--mint-500); --warning:var(--amber-500);
  --danger:var(--red-500); --focus:var(--mint-400);
  --glow-accent:0 0 0 1px color-mix(in oklab,var(--violet-400) 40%,transparent), 0 8px 40px -8px color-mix(in oklab,var(--violet-500) 55%,transparent);
  --shadow-1:0 1px 2px rgb(0 0 0 / .4), 0 4px 16px -4px rgb(0 0 0 / .5);
  --shadow-2:0 2px 6px rgb(0 0 0 / .4), 0 16px 48px -12px rgb(0 0 0 / .6);

  /* player slots 0..7 (also glyphs: circle, triangle, square, diamond, star, hexagon, plus, ring) */
  --p0:#6C5CFF; --p1:#2EF2C2; --p2:#FF5C8A; --p3:#FFC24B; --p4:#3DA9FF; --p5:#FF8A3D; --p6:#B6F23D; --p7:#E05CFF;

  /* type */
  --font-sans:'Rubik', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, Consolas, monospace;
  --fs-xs:.75rem; --fs-sm:.875rem; --fs-md:1rem; --fs-lg:1.25rem; --fs-xl:1.5rem; --fs-2xl:2rem;
  --fs-3xl:2.75rem; --fs-4xl:3.75rem; --fs-5xl:5.25rem;
  --fw-regular:400; --fw-medium:500; --fw-bold:700; --fw-black:800;
  --lh-tight:1.1; --lh-snug:1.3; --lh-body:1.6; --tracking-display:-0.02em;

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

  /* radii */
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:32px; --r-pill:999px;

  /* motion */
  --ease-out:cubic-bezier(.2,.8,.2,1); --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur-1:120ms; --dur-2:220ms; --dur-3:420ms; --dur-4:700ms;

  /* layers */
  --z-base:0; --z-overlay:100; --z-cursor:500; --z-toast:800; --z-modal:900;
}
@media (prefers-reduced-motion: reduce) { :root { --dur-1:0ms; --dur-2:0ms; --dur-3:0ms; --dur-4:0ms; } }

/* Optional light section theme for the landing page (§9.2 notes). */
[data-theme="light"] {
  --bg:var(--ink-50); --bg-elevated:#FFFFFF;
  --surface:#FFFFFF; --surface-2:var(--ink-100); --surface-3:var(--ink-200);
  --border:color-mix(in oklab, var(--ink-500) 18%, transparent); --border-strong:var(--ink-300);
  --text:var(--ink-950); --text-muted:var(--ink-500); --text-faint:var(--ink-400);
  --accent-hover:var(--violet-600); --accent-press:var(--violet-700);
  --focus:var(--violet-500);
}

/*
 * Extensions (WP4, spec §13.2: tokens may only be extended). Derived tokens
 * used by base.css and components.css; none of them changes a value above.
 */
:root {
  --glow-signal:0 0 0 1px color-mix(in oklab,var(--mint-400) 40%,transparent), 0 8px 36px -10px color-mix(in oklab,var(--mint-500) 55%,transparent);
  --glow-danger:0 0 0 1px color-mix(in oklab,var(--red-500) 45%,transparent), 0 8px 36px -10px color-mix(in oklab,var(--red-500) 50%,transparent);
  --highlight-inset:inset 0 1px 0 rgb(255 255 255 / .06);
  --gradient-accent:linear-gradient(180deg, var(--violet-400) -40%, var(--violet-500) 45%, var(--violet-600) 120%);
  --gradient-surface:linear-gradient(180deg, color-mix(in oklab, var(--surface-2) 92%, var(--violet-500)) 0%, var(--surface) 100%);
  --scrim:color-mix(in oklab, var(--ink-950) 78%, transparent);
  --surface-overlay:color-mix(in oklab, var(--ink-850) 94%, transparent);
  --text-on-light:var(--ink-950);
  --ring-width:3px; --ring-offset:3px;
  --focus-scale:1;
  /* Floor for every interactive control (components.css clamps with max()).
   * 24 px = WCAG 2.2 AA on the site; phone.css raises it to 56 px, tv.css to 64 px (§9.4). */
  --target-min:24px;
  --ease-emphasized:cubic-bezier(.2,0,0,1);
  --dur-fade:250ms;
}
@media (prefers-reduced-motion: reduce) { :root { --dur-fade:0ms; } }
[data-theme="light"] {
  --gradient-surface:linear-gradient(180deg, #FFFFFF 0%, var(--ink-50) 100%);
  --highlight-inset:inset 0 1px 0 rgb(255 255 255 / .9);
  --surface-overlay:color-mix(in oklab, #FFFFFF 94%, transparent);
  --scrim:color-mix(in oklab, var(--ink-200) 70%, transparent);
}