/*
 * RaceDash.live — design tokens.
 *
 * Shared by the marketing site and the app so the two stay visually one thing.
 * Marketing imports this stylesheet directly and takes no JS dependency on the
 * shared package.
 *
 * Accent is the purple a timing tower uses for a fastest sector. Green and
 * amber are reserved for genuine state (live / stale, resolved / open) and are
 * never decorative.
 */

:root {
  --ground: #fafafc;
  --surface: #ffffff;
  --surface-alt: #f1f0f6;
  --ink: #1b1a24;
  --ink-2: #56535f;
  --ink-3: #7c7889;
  --rule: #e3e1ea;
  --rule-strong: #cfccda;

  --accent: #6a3fd4;
  --accent-ink: #5732b4;
  --accent-soft: #efe9fd;

  --good: #1e7a4b;
  --good-soft: #e3f3ea;
  --warn: #9a6608;
  --warn-soft: #f8eeda;
  --bad: #b3261e;
  --bad-soft: #fbe9e7;

  --f-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-body: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --f-ui: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

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

  --radius: 5px;
  --radius-sm: 3px;

  --shadow: 0 1px 2px rgb(27 26 36 / 0.06), 0 4px 16px rgb(27 26 36 / 0.05);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --ground: #131218;
    --surface: #1a1922;
    --surface-alt: #22212c;
    --ink: #ecebf2;
    --ink-2: #a5a2b1;
    --ink-3: #837f91;
    --rule: #2d2b38;
    --rule-strong: #403d4f;

    --accent: #a98bfa;
    --accent-ink: #bea6ff;
    --accent-soft: #272040;

    --good: #4fd08c;
    --good-soft: #14301f;
    --warn: #e2ac44;
    --warn-soft: #33260d;
    --bad: #f2857c;
    --bad-soft: #3a1714;

    --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 16px rgb(0 0 0 / 0.3);
  }
}

:root[data-theme='dark'] {
  --ground: #131218;
  --surface: #1a1922;
  --surface-alt: #22212c;
  --ink: #ecebf2;
  --ink-2: #a5a2b1;
  --ink-3: #837f91;
  --rule: #2d2b38;
  --rule-strong: #403d4f;

  --accent: #a98bfa;
  --accent-ink: #bea6ff;
  --accent-soft: #272040;

  --good: #4fd08c;
  --good-soft: #14301f;
  --warn: #e2ac44;
  --warn-soft: #33260d;
  --bad: #f2857c;
  --bad-soft: #3a1714;

  --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 16px rgb(0 0 0 / 0.3);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}