/*
 * Shared design tokens for the light-themed Mio pages
 * (dashboard, leaderboard, leagues, league, make).
 *
 * Pages link this stylesheet BEFORE their inline <style> block, so any
 * page-specific override (e.g. Make's lighter panel shadow) still wins via
 * normal cascade order. The values here are the canonical Mio account look —
 * when restyling a page to match the rest of the site, prefer these tokens
 * over hard-coded values.
 */

:root {
  color-scheme: light;

  /* Color channels (rgb triplets, used as rgb(var(--token))) */
  --primary: 28 28 28;
  --surface-low: 243 243 242;
  --surface: 255 255 255;
  --surface-container: 248 248 247;
  --outline-variant: 216 216 214;
  --on-surface-variant: 107 107 102;
  --error: 180 54 54;
  --success: 33 110 60;
  --accent: 36 96 232;
  --good: 21 128 61;
  --warn: 168 90 18;

  /* Effects */
  --shadow-panel: 4px 4px 12.8px 2px rgba(0, 0, 0, 0.17);

  /* Type */
  --font-founders: "Helvetica Neue", "Avenir Next", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: rgb(var(--surface-low));
  color: rgb(var(--primary));
  font-family: var(--font-founders);
}