/* MySkate design tokens. Theme: the clean rink. Ice-white sheets on a soft white floor, navy ink and a navy band at the top, one
   readable typeface (Atkinson Hyperlegible Next), and a navy button with a red offset shadow. Color has jobs: blue means learning,
   gold means earned, coral means caution. (The stage look before it is kept at the git tag before-zamboni.) */

:root {
  --font-display: "Atkinson Hyperlegible Next", -apple-system, system-ui, sans-serif;
  --font-ui: "Atkinson Hyperlegible Next", -apple-system, system-ui, sans-serif;

  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 24px;
  --r-pill: 999px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --spring-soft: cubic-bezier(0.22, 1.35, 0.36, 1);

  color-scheme: light;

  /* The rink: ice-white sheets on a soft white floor, navy ink, and a navy band at the top of each screen. */
  --navy: #0e2347;
  --navy-2: #2c4466;
  --mute: #51677f;
  --floor: #f5f8fb;
  --card: #ffffff;
  --line: #c9d8e4;
  --line-soft: #dbe7f0;
  --band: #0e2347;
  --band-text: #ffffff;
  --band-dim: #c8d6e6;

  /* Color has jobs: blue is learning, gold is earned, coral is caution, and red is only the button's shadow. */
  --blue: #2a7fc1;
  --blue-deep: #1d659f;
  --blue-soft: #e1effa;
  --gold-fill: #f4c04e;
  --gold-text: #8a5a00;
  --gold-soft: #fbf0d6;
  --coral-soft: #fbe5e1;

  /* The old names, now pointing at the light look, so every piece picks it up. */
  --deep-0: var(--floor);
  --deep-1: var(--card);
  --deep-2: #eef3f8;
  --cream: var(--navy);
  --gold: var(--gold-text);
  --gold-hi: #a06c00;
  --red: #d9382c;
  --paper: #ffffff;
  --ice: var(--blue);
  --ice-bright: var(--blue-deep);
  --ice-white: #eaf3f9;
  --snow: #ffffff;
  --sun: #a06c00;
  --sun-deep: #b47a12;
  --peach: #e38b5c;
  --coral: #c8402f;
  --coral-deep: #a8352a;

  /* Skill categories: flow, air, rotation */
  --cat-skills: var(--blue);
  --cat-jumps: var(--gold-fill);
  --cat-spins: #8f7be0;

  --text: var(--navy);
  --text-dim: var(--navy-2);
  --text-faint: var(--mute);
  --ink: var(--navy);
  --ink-gold: #5a3a00;

  --rule: var(--line-soft);
  --rule-strong: var(--line);
  --rule-gold: var(--line);
  --panel: #ffffff;
  --glass-tint: #ffffff;
  --glass-edge: var(--line);
  --glass-edge-soft: var(--line-soft);
  --glass-blur: none;
  --glass-shadow: 0 14px 34px rgba(14, 35, 71, 0.16);
  --track: var(--line-soft);

  --sky-top: var(--floor);
  --sky-mid: var(--floor);
  --sky-bot: var(--floor);
  --glow: transparent;
}

/* Time-of-day light: it tints the navy band at the top of each screen. Golden hour is the default. */

:root[data-light="sunrise"] {
  --band: #33285e;
}

:root[data-light="midday"] {
  --band: #12507e;
}

:root[data-light="dusk"] {
  --band: #24195a;
}