/* Design tokens — PowerPlay.
 * Source: mockups/owerplay.com/b-one-account.html (approved 2026-11-06), :root moved as is.
 * Palette and type are fixed by the brief (TZ §21). Kit role names below are aliases,
 * so the template's components keep working on the mockup's values.
 */
:root {
  /* ── Palette: fixed by TZ ─────────────────────────────────────────────── */
  --c-bg: #101820;
  --c-surface: #1D2935;
  --c-brand: #00B67A;
  --c-accent: #F4B942;
  --c-text: #FFFFFF;
  --c-text-2: #B8C4D1;
  --c-line: #344653;

  /* ── Derived roles: from the mockup ───────────────────────────────────── */
  --surface-0: #0B1218;
  --surface-1: #151F29;
  --surface-2: var(--c-surface);
  --surface-3: color-mix(in oklab, var(--c-surface) 86%, var(--c-text-2));
  --hair: color-mix(in oklab, var(--c-text-2) 13%, transparent);
  --hair-2: color-mix(in oklab, var(--c-text-2) 22%, transparent);
  --brand-ink: #08130E;
  --brand-tint: color-mix(in oklab, var(--c-brand) 16%, transparent);
  --brand-tint-2: color-mix(in oklab, var(--c-brand) 28%, transparent);
  --brand-soft: color-mix(in oklab, var(--c-brand) 65%, white);
  --accent-tint: color-mix(in oklab, var(--c-accent) 16%, transparent);
  --text-3: #9AA6B3;   /* 5.6:1 on --c-surface, 4.6:1 on --surface-3 (audit.js) */

  /* ── Added by us: states the mockup does not draw ─────────────────────── */
  --c-brand-hover: color-mix(in oklab, var(--c-brand) 88%, white);
  --c-error: #FF8A7A;          /* 6.9:1 on --surface-2 */
  --c-success: var(--brand-soft);
  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--c-brand) 45%, transparent);

  /* ── Type: from the mockup (Manrope + Inter by TZ) ────────────────────── */
  --ff-head: "Manrope", "Inter", system-ui, sans-serif;
  --ff-body: "Inter", system-ui, sans-serif;
  --ff-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas, monospace;
  --fs-h1: clamp(2.5rem, 1.2rem + 3.2vw, 4.25rem);
  --fs-h2: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem);
  --fs-h3: 1.25rem;
  --fs-body: 1rem;
  --fs-sm: .875rem;
  --fs-xs: .75rem;
  --fs-kicker: .6875rem;
  --lh-tight: 1.08;
  --lh-base: 1.55;

  /* ── Shape and depth: from the mockup ─────────────────────────────────── */
  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;
  --sh-1: 0 1px 2px rgb(0 0 0 / .35), 0 8px 24px -14px rgb(0 0 0 / .6);
  --sh-2: 0 1px 2px rgb(0 0 0 / .4), 0 18px 40px -18px rgb(0 0 0 / .75);

  /* ── Space: 8px grid (mockup gaps 14 and section 112 kept) ────────────── */
  --gap: 14px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --sec-gap: 112px;

  /* ── Layout ───────────────────────────────────────────────────────────── */
  --rail-w: 232px;
  --util-h: 64px;
  --page-max: 1376px;
  --page-pad: 28px;

  /* ── Motion: from the mockup ──────────────────────────────────────────── */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.32, .5, 1);
  --dur-fast: 160ms;
  --dur-base: 220ms;
  --dur-slow: 320ms;

  /* ── Layers (added) ───────────────────────────────────────────────────── */
  --z-rail: 20;
  --z-header: 30;
  --z-dock: 40;
  --z-drawer: 50;
  --z-toast: 60;
  --z-overlay: 900;
  --z-modal: 1000;

  /* ── Kit role aliases (template components read these) ────────────────── */
  --color-bg: var(--c-bg);
  --color-surface: var(--c-surface);
  --color-text: var(--c-text);
  --color-muted: var(--c-text-2);
  --color-brand: var(--c-brand);
  --color-border: var(--hair-2);
  --color-error: var(--c-error);
  --color-success: var(--c-success);
  --font-display: var(--ff-head);
  --font-body: var(--ff-body);
  --fs-body-alias: var(--fs-body);
  --fs-small: var(--fs-sm);
  --radius-sm: var(--r-xs);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);
}

/* Breakpoints (constants, keep in step with kit.config.json → breakpoints):
   --bp-mobile: 760px (rail → bottom tab bar)   --bp-tablet: 1180px (bento 12 → 6 cols)
   --bp-desktop: 1440px (approved width)        wide.css centres above 1440. */