:root {

  /* Neutral ramp, accent and status colours are ported 1:1 from the desktop
     app's design tokens (ui/src/styles/tokens.css, itself mirrored from
     `namespace theme` in gui_app.cpp) so the site and the app read as the
     same product. Only the variable names differ; the hex values don't. */
  --color-bg: #0b0e13;
  --color-bg-elevated: #11161e;
  --color-surface: #141a23;
  --color-surface-alt: #1a212c;
  --color-surface-hover: #1f2733;
  --color-border: #1c232d;
  --color-border-strong: #232b36;

  --color-text: #f2f5f9;
  --color-text-muted: #a3aebf;
  /* Was #6d7889 - measured (WCAG relative-luminance contrast ratio) against
     every surface color this token actually sits on: 4.32:1 on --color-bg,
     3.91:1 on --color-surface, 3.62:1 on --color-surface-alt - all below the
     4.5:1 AA threshold for normal-size text (timestamps, secondary labels,
     empty-state copy - real information, not decoration, so the 3:1
     large-text/UI-component threshold doesn't apply). Brightened by the
     minimum that clears 4.5:1 against the darkest of those three
     (--color-surface-alt, the binding constraint) - 4.52/4.89/5.40:1
     respectively - while staying visibly the dimmest of the three text
     tiers, well below --color-text-muted's own 8.62:1. Same hue, just
     lighter; not a redesign. */
  --color-text-faint: #838c9b;
  --color-text-on-accent: #ffffff;

  --color-accent: #4e82ff;
  --color-accent-hover: #6394ff;
  --color-accent-strong: #3f73f0;
  --color-accent-muted: rgba(78, 130, 255, 0.14);
  --color-accent-border: #2f4c8c;
  /* The exact blue sampled from the "S" in assets/logo.png - used only for
     the "STRIKE" half of the wordmark, kept separate from --color-accent-hover
     (buttons/links/hover states everywhere else) so this stays a precise
     brand-match without recoloring unrelated UI. */
  --color-brand-strike: #0080ff;

  --color-success: #3bcb73;
  --color-success-muted: rgba(59, 203, 115, 0.14);
  --color-warning: #f5b74e;
  --color-warning-muted: rgba(245, 183, 78, 0.14);
  --color-danger: #e34b57;
  --color-danger-muted: rgba(227, 75, 87, 0.12);
  --color-danger-border: rgba(227, 75, 87, 0.4);
  /* StatTrak orange - was three slightly different hardcoded hexes
     (#ff8c42/#ff9a5c/#ff9d6d) spread across csdb.css/inventory.css, including
     one checkbox whose checked and unchecked states didn't match. One token
     now backs every StatTrak badge/label/accent-color site-wide. */
  --color-stattrak: #ff8c42;
  --color-stattrak-muted: rgba(255, 140, 66, 0.16);

  /* Rank tiers, low to high: E (grey) < D (orange) < C (dark) < B (gold) <
     A (blue) < Star. Matches the rank chart's dot colors per group. */
  --rank-e: #8b93a1;
  --rank-e-muted: rgba(139, 147, 161, 0.16);
  --rank-d: #e2853f;
  --rank-d-muted: rgba(226, 133, 63, 0.16);
  /* Was #6b7280 - a darker grey barely distinguishable at a glance from
     --rank-e's #8b93a1, even though E and C are two tiers apart. Shifted
     toward blue so the tier-color ladder reads correctly by color alone,
     not just by the letter glyph next to it. */
  --rank-c: #7d8aa8;
  --rank-c-muted: rgba(125, 138, 168, 0.16);
  --rank-b: #e6bd5c;
  --rank-b-muted: rgba(230, 189, 92, 0.16);
  --rank-a: #7fc4ea;
  --rank-a-muted: rgba(127, 196, 234, 0.16);
  --rank-star: #ecdfc0;
  --rank-star-muted: rgba(236, 223, 192, 0.18);

  --font-body: "Titillium Web", "Segoe UI", sans-serif;
  --font-display: "Barlow Condensed", "Segoe UI", sans-serif;
  /* Reserved for numeric readouts - ELO, K/D, prices, floats, timestamps -
     so competitive stats read as data rather than prose. Not a full brand
     font swap: everything else keeps --font-body/--font-display as-is. */
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", monospace;

  --fs-100: 1.2rem;
  --fs-200: 1.4rem;
  --fs-300: 1.6rem;
  --fs-400: 1.8rem;
  --fs-500: 2.2rem;
  --fs-600: 2.8rem;
  --fs-700: 3.6rem;
  --fs-800: 4.8rem;
  --fs-900: clamp(4rem, 3rem + 4vw, 7.2rem);

  --fw-regular: 500;
  --fw-medium: 600;
  --fw-bold: 700;
  --fw-black: 800;

  --tracking-normal: 0.02em;
  --tracking-wide: 0.06em;
  --tracking-wider: 0.14em;

  --space-1: 0.4rem;
  --space-2: 0.8rem;
  --space-3: 1.2rem;
  --space-4: 1.6rem;
  --space-5: 2rem;
  --space-6: 2.4rem;
  --space-7: 3.2rem;
  --space-8: 4rem;
  --space-9: 6rem;

  --radius-0: 0px;
  --radius-1: 8px;
  --radius-2: 10px;
  --radius-full: 999px;

  --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-3: 0 24px 56px rgba(0, 0, 0, 0.35);

  --duration-fast: 150ms;
  --duration-base: 220ms;
  --duration-slow: 400ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decelerate: cubic-bezier(0.16, 1, 0.3, 1);

  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Float/wear indicator gradient (green = Factory New -> red =
     Battle-Scarred), shared by the Skins Database and Inventory pages' float
     bars/sliders - previously this exact literal was duplicated across 5
     separate rules in csdb.css and inventory.css. */
  --float-gradient: linear-gradient(90deg, #22c55e 0%, #84cc16 25%, #fbbf24 50%, #f97316 75%, #ef4444 100%);

  --container-max: 1360px;
  --sidebar-width: 250px;
  --sidebar-width-collapsed: 64px;
  --hero-wedge: polygon(62% 0, 100% 0, 100% 100%, 38% 100%);

  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal-backdrop: 900;
  --z-modal: 1000;
  --z-tooltip: 1100;
  --z-toast: 1200;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0.01ms;
    --duration-base: 0.01ms;
    --duration-slow: 0.01ms;
  }
}