/* Design tokens. One accent (success + the single primary action), amber for "good to know", red for failure only. */
:root {
  --paper: #FAFAF8;
  --surface: #FFFFFF;
  --surface-2: #F3F2EE;
  --surface-3: #ECEBE6;
  --ink: #15171A;
  --ink-2: #454A52;
  --ink-3: #646A73;   /* smallest text colour: 5.2:1 on paper */
  --ink-4: #A3A8AE;   /* decorative only, never text */
  --line: #E7E6E1;
  --line-2: #D6D5CF;
  --accent: #14B57A;
  --accent-ink: #0A7A52;
  --accent-tint: #E8F6EF;
  --accent-line: #B9E5D1;
  --on-accent: #0E1012;
  --amber: #B7791F;
  --amber-ink: #8A5A12;
  --amber-tint: #FBF3E3;
  --amber-line: #EFDDB8;
  --red: #B42318;
  --red-tint: #FDEDEB;
  --red-line: #F4CBC5;
  --focus: #0A7A52;
  --scrim: rgba(14, 16, 18, 0.32);
  --shadow-1: 0 1px 2px rgba(21, 23, 26, 0.04), 0 10px 28px -18px rgba(21, 23, 26, 0.16);
  --shadow-pop: 0 16px 40px -12px rgba(21, 23, 26, 0.22), 0 2px 6px rgba(21, 23, 26, 0.06);
  --sol-a: #9945FF;
  --sol-b: #14F195;

  --font-sans: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* 4px half-step, 8px scale */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 40px; --s-8: 48px; --s-9: 64px; --s-10: 96px;

  /* type scale */
  --t-12: 12px; --t-13: 13px; --t-14: 14px; --t-15: 15px; --t-17: 17px;
  --t-20: 20px; --t-24: 24px; --t-32: 32px; --t-40: 40px; --t-56: 56px;

  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 160ms;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0E1012;
    --surface: #15181B;
    --surface-2: #1C2024;
    --surface-3: #23282D;
    --ink: #ECEDEE;
    --ink-2: #B3B8BF;
    --ink-3: #8D939B;
    --ink-4: #4D535A;
    --line: #24292E;
    --line-2: #323840;
    --accent: #14B57A;
    --accent-ink: #3DD69B;
    --accent-tint: #10291F;
    --accent-line: #1D4A37;
    --on-accent: #0E1012;
    --amber: #E6AE5C;
    --amber-ink: #E6AE5C;
    --amber-tint: #2A2113;
    --amber-line: #4A3A1F;
    --red: #F2786D;
    --red-tint: #2E1513;
    --red-line: #5A2A25;
    --focus: #3DD69B;
    --scrim: rgba(0, 0, 0, 0.55);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 28px -18px rgba(0, 0, 0, 0.6);
    --shadow-pop: 0 16px 40px -12px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.4);
    color-scheme: dark;
  }
}
:root[data-theme="dark"], [data-theme="dark"] {
  --paper: #0E1012;
  --surface: #15181B;
  --surface-2: #1C2024;
  --surface-3: #23282D;
  --ink: #ECEDEE;
  --ink-2: #B3B8BF;
  --ink-3: #8D939B;
  --ink-4: #4D535A;
  --line: #24292E;
  --line-2: #323840;
  --accent: #14B57A;
  --accent-ink: #3DD69B;
  --accent-tint: #10291F;
  --accent-line: #1D4A37;
  --on-accent: #0E1012;
  --amber: #E6AE5C;
  --amber-ink: #E6AE5C;
  --amber-tint: #2A2113;
  --amber-line: #4A3A1F;
  --red: #F2786D;
  --red-tint: #2E1513;
  --red-line: #5A2A25;
  --focus: #3DD69B;
  --scrim: rgba(0, 0, 0, 0.55);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 28px -18px rgba(0, 0, 0, 0.6);
  --shadow-pop: 0 16px 40px -12px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.4);
  color-scheme: dark;
}

[data-theme="light"] {
  --paper: #FAFAF8;
  --surface: #FFFFFF;
  --surface-2: #F3F2EE;
  --surface-3: #ECEBE6;
  --ink: #15171A;
  --ink-2: #454A52;
  --ink-3: #646A73;   /* smallest text colour: 5.2:1 on paper */
  --ink-4: #A3A8AE;   /* decorative only, never text */
  --line: #E7E6E1;
  --line-2: #D6D5CF;
  --accent: #14B57A;
  --accent-ink: #0A7A52;
  --accent-tint: #E8F6EF;
  --accent-line: #B9E5D1;
  --on-accent: #0E1012;
  --amber: #B7791F;
  --amber-ink: #8A5A12;
  --amber-tint: #FBF3E3;
  --amber-line: #EFDDB8;
  --red: #B42318;
  --red-tint: #FDEDEB;
  --red-line: #F4CBC5;
  --focus: #0A7A52;
  --scrim: rgba(14, 16, 18, 0.32);
  --shadow-1: 0 1px 2px rgba(21, 23, 26, 0.04), 0 10px 28px -18px rgba(21, 23, 26, 0.16);
  --shadow-pop: 0 16px 40px -12px rgba(21, 23, 26, 0.22), 0 2px 6px rgba(21, 23, 26, 0.06);
  --sol-a: #9945FF;
  --sol-b: #14F195;

    color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--t-15)/1.5 var(--font-sans);
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.vh {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}