/* Scrolls SMP design tokens: the only place for colours, type, spacing, radii and shadows.
   Every page and component reads these variables. Tier colours are generated from app/tiers.py (/tiers.css).
   Fonts are self-hosted (no requests to Google). */

:root {
  /* background layers, darkest first (deep navy) */
  --bg-0: #0a0d13;          /* page */
  --bg-1: #10141c;          /* surface: cards, bars */
  --bg-2: #161b25;          /* raised: rows, inputs */
  --bg-3: #1e2431;          /* hover, pressed, inset */
  --border: #252c3a;
  --border-strong: #353e50;

  /* text */
  --text: #f2f4f8;
  --text-2: #c5cbd6;        /* body copy on dark */
  --muted: #959fb1;         /* labels, meta: 6.4:1 on --bg-1 */
  --faint: #7a8395;         /* least important: 4.6:1 on --bg-1 */

  /* accents: logo green for actions, scroll gold for highlights */
  --accent: #6cc24a;
  --accent-hover: #7fd25c;
  --accent-ink: #0b1408;    /* text on the green button */
  --accent-text: #9be07a;
  --accent-soft: #172417;
  --gold: #e2b85c;
  --gold-text: #f0cf85;
  --gold-soft: #2a2213;

  /* states */
  --up: #4ade80;
  --down: #f87171;
  --info: #8fb1ee;
  --eu-bg: #172443;         /* EU badge background */
  --warn: #f2a640;
  --discord: #4c58e0;           /* Discord blurple, darkened for 5:1 with white */
  --discord-hover: #3f49b0;

  /* podium */
  --p1: #f0c75d;
  --p2: #b9c5d2;
  --p3: #cd8549;

  /* type: display face for headings and big numbers, Geist for text */
  --f-display: "Chakra Petch", "Geist", ui-sans-serif, system-ui, sans-serif;
  --f-body: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-pixel: "Pixelify Sans", ui-monospace, monospace;   /* pixel face with real lower case, only for the podium names */
  --fs-xs: 0.75rem;         /* 12 labels */
  --fs-sm: 0.875rem;        /* 14 meta */
  --fs-base: 1rem;          /* 16 text */
  --fs-lg: 1.125rem;        /* 18 lead */
  --fs-xl: 1.375rem;        /* 22 card titles */
  --fs-2xl: 1.75rem;        /* 28 section titles */
  --fs-3xl: 2.25rem;        /* 36 page titles */
  --fs-4xl: 3rem;           /* 48 hero, big numbers */
  --lh-tight: 1.1;
  --lh-text: 1.6;

  /* spacing steps */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 72px;

  /* radii */
  --r-sm: 8px;              /* badges, chips inside rows */
  --r-md: 10px;             /* buttons, inputs, tabs */
  --r-lg: 14px;             /* cards, rows */
  --r-xl: 20px;             /* hero, modal */
  --r-pill: 999px;

  /* shadows */
  --sh-1: 0 1px 0 rgb(255 255 255 / 0.03) inset, 0 6px 16px -10px rgb(0 0 0 / 0.7);
  --sh-2: 0 18px 40px -18px rgb(0 0 0 / 0.85);
  --sh-gold: 0 0 0 1px rgb(226 184 92 / 0.25), 0 10px 30px -12px rgb(226 184 92 / 0.35);
  --focus: 0 0 0 2px var(--bg-0), 0 0 0 4px var(--accent);

  /* layout and motion */
  --wrap: 1160px;
  --gutter: clamp(16px, 4vw, 32px);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 0.15s;
  --t-med: 0.25s;

  color-scheme: dark;
}