/* Redesign V1 colour, type, spacing, and shape tokens. */
:root {
  --bg: #1B222C;
  --surface-1: #242D39;
  --surface-2: #2F3A48;
  --surface-3: #3A4656;
  --hairline: #445164;
  --tabbar: #161C24;
  --status-bar: #1B222C;
  --text-1: #F3F6FA;
  --text-2: #BCC7D4;
  --text-3: #A2AEBD;
  --train: #E8833A;
  --train-ink: #E8833A;
  --train-muted: #8A5A3A;
  --fuel: #4FB286;
  --fuel-ink: #4FB286;
  --recovery: #5FA8E8;
  --recovery-ink: #5FA8E8;
  --on-accent: #15191D;
  --success-tint: rgba(79,178,134,0.14);
  --warning: var(--text-2);
  --danger: var(--text-2);
  --chart: #7A8592;

  --accent: var(--train);
  --success: var(--fuel);

  --bg-0: var(--bg);
  --bg-1: var(--bg);
  --bg-2: var(--bg);
  --bg-3: var(--bg);
  --bg-4: var(--bg);
  --bg-5: var(--bg);
  --canopy: var(--tabbar);
  --surface: var(--surface-1);
  --raised: var(--surface-2);
  --well: var(--surface-2);
  --stone: var(--hairline);
  --edge: var(--hairline);
  --edge-strong: var(--hairline);
  --acid: var(--accent);
  --blue: var(--text-2);
  --active-tint: var(--surface-3);
  --lantern: var(--chart);
  --wisp: var(--chart);
  --moss: var(--chart);
  --cap: var(--chart);
  --might: var(--chart);
  --wind: var(--chart);
  --grit: var(--chart);
  --vitality: var(--fuel);
  --mind: var(--chart);
  --text: var(--text-1);

  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 17px;
  --text-lg: 17px;
  --text-xl: 22px;
  --text-xxl: 34px;

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;

  --r-sm: 10px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 16px;
  --r-full: 999px;

  --motion-state: 120ms;
  --motion-screen: 220ms;

  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --font-display: var(--font-ui);

  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #F3F5F8;
  --surface-1: #FFFFFF;
  --surface-2: #EBEFF4;
  --surface-3: #DFE5EC;
  --hairline: #D3DAE3;
  --tabbar: #FFFFFF;
  --status-bar: #161C24;
  --text-1: #141A22;
  --text-2: #4A5563;
  --text-3: #5F6B7A;
  --train-ink: #A04E0C;
  --train-muted: #EDC7A6;
  --fuel-ink: #1F7A55;
  --recovery-ink: #2B6CB0;
  --chart: #9AA5B2;
  --blue: var(--text-2);
  --lantern: var(--chart);
  --wisp: var(--chart);
  --moss: var(--chart);
  --cap: var(--chart);
  --might: var(--chart);
  --wind: var(--chart);
  --grit: var(--chart);
  --mind: var(--chart);
  --text: var(--text-1);

  color-scheme: light;
}