/* SECTION: Design tokens — DonutRisk app shell */

:root {
  color-scheme: dark;

  /* SECTION: Surfaces */
  --c-bg: #0c0d0b;
  --c-bg-2: #0f100d;
  --c-topbar: #121210;
  --c-surface: #171814;
  --c-surface-2: #1e1f1a;
  --c-surface-3: #282a22;
  --c-line: #322f28;
  --c-line-soft: #26241e;

  /* SECTION: Brand accent — #ff6b00 */
  --c-accent: #ff6b00;
  --c-accent-bright: #ff8124;
  --c-accent-dim: #cf5600;
  --c-accent-ink: #1c0c00;
  --c-accent-glow: rgba(255, 107, 0, 0.38);
  --c-accent-wash: rgba(255, 107, 0, 0.13);

  /* SECTION: Support colours */
  --c-blurple: #5865f2;
  --c-blurple-bright: #6b77f5;
  --c-coin: #ffb43a;
  --c-coin-deep: #8a5a12;
  --c-hi: #ffe9d6;

  /* SECTION: Text */
  --c-ink: #ecebe6;
  --c-ink-dim: #9d988c;
  --c-ink-faint: #6c685d;

  /* SECTION: Rank chips */
  --rank-bronze-bg: #6f4423;
  --rank-bronze-ink: #ffd7ac;
  --rank-silver-bg: #454d57;
  --rank-silver-ink: #e0e7ef;
  --rank-gold-bg: #6f5a10;
  --rank-gold-ink: #ffe59c;

  /* SECTION: Status */
  --c-win: #35e07f;
  --c-loss: #ff5c62;

  /* SECTION: Type */
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", monospace;

  --fs-100: 0.6875rem;
  --fs-200: 0.8125rem;
  --fs-300: 0.9375rem;
  --fs-400: 1.0625rem;
  --fs-500: 1.375rem;
  --fs-600: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);

  --tracking-wide: 0.04em;
  --tracking-wider: 0.12em;

  /* SECTION: Space — 4px scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;

  /* SECTION: Radius */
  --r-xs: 0.375rem;
  --r-sm: 0.5rem;
  --r-md: 0.75rem;
  --r-lg: 1rem;
  --r-xl: 1.25rem;
  --r-pill: 62rem;

  /* SECTION: Shadow */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 6px 20px -6px rgba(0, 0, 0, 0.55);
  --shadow-pop: 0 12px 40px -10px rgba(0, 0, 0, 0.72);

  /* SECTION: Motion */
  --dur-fast: 110ms;
  --dur-mid: 200ms;
  --dur-slow: 420ms;
  --ease: cubic-bezier(0.22, 0.7, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.42, 0.64, 1);

  /* SECTION: Z scale */
  --z-main: 1;
  --z-sidebar: 20;
  --z-topbar: 30;
  --z-drop: 40;
  --z-toast: 60;

  /* SECTION: Shell metrics */
  --topbar-h: 4rem;
  --sidebar-w: 17.75rem;
}