/* Chargerhead design tokens. Generated from the design system's tokens.json; don't edit by hand. */

@font-face { font-family: "Sora"; src: url("fonts/Sora-Variable.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/Figtree-Variable.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono-Variable.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  --font-display: "Sora", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-text: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --container-max: 1240px;
  --measure: 68ch;
  --header-height: 64px;
  --rail-width: 340px;
  --surface: #f5f7f9;
  --surface-raised: #ffffff;
  --surface-sunken: #e9edf1;
  --surface-inverse: #0e1a22;
  --on-inverse: #e8eef2;
  --line: #d8dee4;
  --line-strong: #77848f;
  --ink: #0e1a22;
  --ink-muted: #475663;
  --ink-subtle: #5f6d79;
  --charge: #00bfa6;
  --on-charge: #05231f;
  --charge-ink: #00756a;
  --charge-soft: #d4f5ef;
  --spark: #b53a07;
  --on-spark: #ffffff;
  --spark-soft: #fde8dc;
  --focus-ring: var(--charge-ink);
  --scrim: rgba(7, 12, 16, 0.72);
  --shadow-card: 0 1px 2px rgba(14, 26, 34, 0.05), 0 2px 8px rgba(14, 26, 34, 0.04);
  --shadow-raised: 0 2px 4px rgba(14, 26, 34, 0.06), 0 12px 28px rgba(14, 26, 34, 0.10);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface: #0b1218;
  --surface-raised: #121c24;
  --surface-sunken: #070c10;
  --surface-inverse: #e8eef2;
  --on-inverse: #0e1a22;
  --line: #24323d;
  --line-strong: #5a6b78;
  --ink: #e8eef2;
  --ink-muted: #a9b6c0;
  --ink-subtle: #8d9ba7;
  --charge: #1fd1b6;
  --on-charge: #04201c;
  --charge-ink: #3ddcc4;
  --charge-soft: #0d3631;
  --spark: #ff8a50;
  --on-spark: #1f0b02;
  --spark-soft: #3a1c10;
  --focus-ring: var(--charge);
  --scrim: rgba(3, 6, 8, 0.78);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-raised: 0 2px 4px rgba(0, 0, 0, 0.5), 0 12px 28px rgba(0, 0, 0, 0.45);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface: #0b1218;
    --surface-raised: #121c24;
    --surface-sunken: #070c10;
    --surface-inverse: #e8eef2;
    --on-inverse: #0e1a22;
    --line: #24323d;
    --line-strong: #5a6b78;
    --ink: #e8eef2;
    --ink-muted: #a9b6c0;
    --ink-subtle: #8d9ba7;
    --charge: #1fd1b6;
    --on-charge: #04201c;
    --charge-ink: #3ddcc4;
    --charge-soft: #0d3631;
    --spark: #ff8a50;
    --on-spark: #1f0b02;
    --spark-soft: #3a1c10;
    --focus-ring: var(--charge);
    --scrim: rgba(3, 6, 8, 0.78);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-raised: 0 2px 4px rgba(0, 0, 0, 0.5), 0 12px 28px rgba(0, 0, 0, 0.45);
  }
}