/* COD Loadout design tokens. One accent (amber), two neutral layers, system fonts.
   Every colour pair used for text here is >= 4.5:1; --border-control is >= 3:1 on every surface. */
:root {
  color-scheme: dark;

  /* Surfaces: page, panel layer, raised control layer, selected/hover layer */
  --bg: #0b0e12;
  --surface-1: #11161c;
  --surface-2: #171d25;
  --surface-3: #1f2731;

  /* Lines: --border is decorative separation, --border-control outlines interactive controls (>= 3:1) */
  --border: #2a3441;
  --border-strong: #3a4757;
  --border-control: #64768c;

  /* Text */
  --text: #eef2f6;
  --text-muted: #a3b0be;
  --text-subtle: #8794a3;

  /* Accent: primary actions, current selection, focus. Never decoration. */
  --accent: #f5a524;
  --accent-hover: #ffb84a;
  --accent-ink: #1b1204;
  --accent-soft: rgba(245, 165, 36, 0.14);

  /* State colours (always paired with text or an icon, never colour alone) */
  --positive: #5ed08a;
  --negative: #ff7b6e;
  --info: #6cb6ff;
  --negative-soft: rgba(255, 123, 110, 0.12);
  --info-soft: rgba(108, 182, 255, 0.12);

  /* Tier board (/tier-list/): one colour per community tier. The letter always carries the rank, the colour only
     reinforces it. Every --tier-* colour is >= 4.5:1 against --tier-ink, the letter colour on the tile. */
  --tier-s: #e5584f;
  --tier-a: #ea913c;
  --tier-b: #e3c24b;
  --tier-c: #7cc25f;
  --tier-d: #5aa2e6;
  --tier-ink: #10141a;

  /* Type */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --text-xs: 0.75rem;   /* 12px: captions, table meta */
  --text-sm: 0.8125rem; /* 13px: dense UI body (builder) */
  --text-md: 0.9375rem; /* 15px: reading body on content pages */
  --text-lg: 1.125rem;  /* 18px */
  --text-xl: 1.375rem;  /* 22px */
  --text-2xl: 1.75rem;  /* 28px */
  --text-3xl: 2.25rem;  /* 36px */
  --leading-tight: 1.25;
  --leading-body: 1.55;

  /* Spacing (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Shape */
  --radius-sm: 6px;   /* chips, small controls */
  --radius-md: 8px;   /* buttons, inputs */
  --radius-lg: 12px;  /* panels, cards */

  /* Layout */
  --header-h: 56px;
  --content-w: 72rem;
  --prose-w: 44rem;

  /* Focus: two-ring so it reads on every surface */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

  /* Motion: state feedback only */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;

  /* Stacking */
  --z-header: 40;
  --z-overlay: 60;
}

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