/* ==========================================================================
   Game ID — Fluent 2 Design Tokens
   Dark primary, Light fully supported via data-theme attribute.
   All values from DESIGN_SYSTEM.md § Variables & § Semantic colour ladder.
   ========================================================================== */

/* ---- Primitives ---------------------------------------------------------- */
:root {
  --alpha-white-04: rgba(255,255,255,0.04);
  --alpha-white-06: rgba(255,255,255,0.06);
  --alpha-white-08: rgba(255,255,255,0.08);
  --alpha-white-12: rgba(255,255,255,0.12);
  --alpha-white-16: rgba(255,255,255,0.16);
  --alpha-black-04: rgba(0,0,0,0.04);
  --alpha-black-06: rgba(0,0,0,0.06);
  --alpha-black-08: rgba(0,0,0,0.08);
  --alpha-black-12: rgba(0,0,0,0.12);
}

/* ---- Dark (default) ------------------------------------------------------ */
[data-theme="dark"], :root {
  --bg-canvas: #141414;
  --bg-layer: #1f1f1f;
  --bg-subtle: #292929;
  --bg-layer-hover: #292929;
  --bg-layer-selected: #333333;
  --bg-disabled: #242424;
  --bg-media: #767676;
  --bg-chip: rgba(255,255,255,0.08);
  --bg-nav-hover: rgba(255,255,255,0.08);
  --bg-overlay-hover: rgba(255,255,255,0.08);
  --bg-skeleton: rgba(255,255,255,0.12);

  --fg-primary: #ffffff;
  --fg-secondary: #d6d6d6;
  --fg-tertiary: #adadad;
  --fg-quaternary: #949494;
  --fg-disabled: #5c5c5c;

  --brand-rest: #115ea3;
  --brand-hover: #0f6cbd;
  --brand-pressed: #0f548c;
  --brand-selected: #77b7f7;

  --stroke-divider: rgba(255,255,255,0.06);
  --stroke-subtle: rgba(255,255,255,0.08);
  --stroke-default: #424242;
  --stroke-strong: #666666;
  --stroke-control: #767676;
  --stroke-focus-outer: #ffffff;
  --stroke-focus-inner: #141414;

  --status-success-fg: #5ec75e;
  --status-caution-fg: #f2c661;
  --status-danger-fg: #e37d80;
  --status-danger-fg-strong: #efa3a6;
  --status-info-fg: #479ef5;

  --conf-high: #5ec75e;
  --conf-medium: #f2c661;
  --conf-low: #efa3a6;
  --conf-empty: #767676;

  --scrollbar-thumb: rgba(255,255,255,0.15);
  --scrollbar-thumb-hover: rgba(255,255,255,0.22);
}

/* ---- Light --------------------------------------------------------------- */
[data-theme="light"] {
  --bg-canvas: #f0f0f0;
  --bg-layer: #ffffff;
  --bg-subtle: #e6e6e6;
  --bg-layer-hover: #fafafa;
  --bg-layer-selected: #d6d6d6;
  --bg-disabled: #f0f0f0;
  --bg-media: #767676;
  --bg-chip: rgba(0,0,0,0.06);
  --bg-nav-hover: rgba(0,0,0,0.06);
  --bg-overlay-hover: rgba(0,0,0,0.06);
  --bg-skeleton: rgba(0,0,0,0.12);

  --fg-primary: #1f1f1f;
  --fg-secondary: #424242;
  --fg-tertiary: #5c5c5c;
  --fg-quaternary: #666666;
  --fg-disabled: #adadad;

  --brand-rest: #0f6cbd;
  --brand-hover: #115ea3;
  --brand-pressed: #0f548c;
  --brand-selected: #115ea3;

  --stroke-divider: rgba(0,0,0,0.06);
  --stroke-subtle: rgba(0,0,0,0.08);
  --stroke-default: #d6d6d6;
  --stroke-strong: #767676;
  --stroke-control: #767676;
  --stroke-focus-outer: #1f1f1f;
  --stroke-focus-inner: #ffffff;

  --status-success-fg: #107c10;
  --status-caution-fg: #835b00;
  --status-danger-fg: #d13438;
  --status-danger-fg-strong: #a4262c;
  --status-info-fg: #0f6cbd;

  --conf-high: #0c5e0c;
  --conf-medium: #4c3600;
  --conf-low: #751d21;
  --conf-empty: #767676;

  --scrollbar-thumb: rgba(0,0,0,0.15);
  --scrollbar-thumb-hover: rgba(0,0,0,0.22);
}

/* ---- Shared spacing ------------------------------------------------------ */
:root {
  --xxs: 2px;  --xs: 4px;  --snudge: 6px;  --s: 8px;
  --m: 12px;  --mnudge: 10px;  --l: 16px;  --xl: 20px;  --xxl: 24px;  --xxxl: 32px;
  --4xl: 40px;  --5xl: 48px;  --6xl: 64px;
}

/* ---- Radius -------------------------------------------------------------- */
:root {
  --r-none: 0;  --r-sm: 2px;  --r-md: 4px;  --r-lg: 6px;
  --r-xl: 8px;  --r-circular: 9999px;
}

/* ---- Type ----------------------------------------------------------------- */
:root {
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", monospace;
  --micro: 10px/14px "Inter";
  --caption: 12px/16px "Inter";
  --caption-strong: 12px/16px "Inter" 600;
  --body: 14px/20px "Inter";
  --body-strong: 14px/20px "Inter" 600;
  --subtitle: 16px/22px "Inter" 600;
  --title: 20px/28px "Inter" 600;
}

/* ---- Motion -------------------------------------------------------------- */
:root {
  --ease-standard: cubic-bezier(0.4,0,0.2,1);
  --ease-decelerate: cubic-bezier(0,0,0,1);
  --ease-accelerate: cubic-bezier(1,0,1,1);
  --t-faster: 50ms;
  --t-fast: 100ms;
  --t-normal: 200ms;
  --t-slow: 300ms;
  --t-slower: 500ms;
  --duration-pulse: 3000ms;
}

/* ---- Layout -------------------------------------------------------------- */
:root {
  --sidebar-w: 256px;
  --topbar-h: 48px;
  --page-max: 1560px;
  --page-gutter: 32px;
}