/*! Spec design system 1.0.0 (2026-11-07). Tokens: every value the components read.
   Light on :root. Dark follows the visitor's system preference unless the page sets
   data-theme="light" or data-theme="dark" on <html>. Accent presets: data-accent="signal-yellow" or
   data-accent="signal-green" on <html>; they change the accent tokens only. */

:root {
  color-scheme: light;

  /* Paper and ink. Pages are white paper; boxes are rare, so surface equals paper. */
  --sp-paper: #ffffff;
  --sp-surface: #ffffff;
  --sp-sunk: #f3f4f5;
  --sp-scrim: rgba(0, 0, 0, 0.52);

  /* Text */
  --sp-ink: #000000;
  --sp-body: #1c1c1c;
  --sp-muted: #4a5056;

  /* Lines: the 1px rule is the main structural device */
  --sp-rule: #000000;
  --sp-hair: #e2e3e5;
  --sp-hair-strong: #c9cbce;
  --sp-line-control: #74797f;
  --sp-grid-line: #e4e4e4;

  /* Accent: international orange. As a fill behind --sp-accent-ink, as --sp-mark for large text
     (24px and up) and graphics on paper, and as --sp-accent-text for small text. */
  --sp-accent: #ff4f00;
  --sp-accent-hover: #e04600;
  --sp-accent-ink: #000000;
  --sp-accent-text: #8f2900;
  --sp-accent-soft: #ffe9de;
  --sp-mark: #ff4f00;
  --sp-focus: #c93c00;

  /* Status */
  --sp-ok: #146c2e;
  --sp-ok-soft: #e4f3e8;
  --sp-warn: #8a4a00;
  --sp-warn-soft: #fbf0dd;
  --sp-danger: #b0001e;
  --sp-danger-soft: #fde7ea;

  /* Data viz: categorical (6), sequential (5), diverging (5). Charts label values directly. */
  --sp-viz-1: #e84800;
  --sp-viz-2: #1a1a1a;
  --sp-viz-3: #2f6db5;
  --sp-viz-4: #7d838a;
  --sp-viz-5: #0b5d55;
  --sp-viz-6: #9a7b4f;
  --sp-seq-1: #ffe3d4;
  --sp-seq-2: #ffb48f;
  --sp-seq-3: #ff7d45;
  --sp-seq-4: #e84800;
  --sp-seq-5: #8c2a00;
  --sp-div-1: #2f6db5;
  --sp-div-2: #9fbde3;
  --sp-div-3: #e6e7e9;
  --sp-div-4: #ffb08c;
  --sp-div-5: #e84800;

  /* Elevation: floating layers only (dialog, toast, tooltip, menus). Everything else is flat. */
  --sp-shadow-pop: 0 1px 0 rgba(0, 0, 0, 0.04), 0 18px 40px -18px rgba(0, 0, 0, 0.32);

  /* Type */
  --sp-font-sans: "Host Grotesk", ui-sans-serif, system-ui, sans-serif;
  --sp-font-mono: "Martian Mono", ui-monospace, Consolas, "Liberation Mono", monospace;
  --sp-fs-figure: clamp(5rem, 1.6rem + 14vw, 15rem);           /* 80 to 240: giant figures */
  --sp-fs-display: clamp(2.75rem, 1.2rem + 6.4vw, 7.25rem);     /* 44 to 116: page title */
  --sp-fs-title: clamp(2rem, 1.4rem + 2.5vw, 3.75rem);          /* 32 to 60: section title */
  --sp-fs-headline: clamp(1.5rem, 1.3rem + 0.85vw, 2.125rem);   /* 24 to 34: sub-section, plan price */
  --sp-fs-index: clamp(1.5rem, 1.25rem + 1vw, 2.25rem);         /* 24 to 36: section numbers */
  --sp-fs-card: 1.25rem;                                        /* 20: card and feature title */
  --sp-fs-lede: clamp(1.1875rem, 1.1rem + 0.4vw, 1.4375rem);    /* 19 to 23: lede */
  --sp-fs-reading: 1.125rem;                                    /* 18: article prose */
  --sp-fs-body: 1.0625rem;                                      /* 17: body, inputs */
  --sp-fs-meta: 0.875rem;                                       /* 14: meta, table cells (never on <p>) */
  --sp-fs-mono: 0.8125rem;                                      /* 13: mono values, buttons, nav */
  --sp-fs-label: 0.75rem;                                       /* 12: mono caps labels, captions */
  --sp-lh-figure: 0.82;
  --sp-lh-display: 0.94;
  --sp-lh-title: 1.02;
  --sp-lh-snug: 1.25;
  --sp-lh-body: 1.55;
  --sp-lh-reading: 1.65;
  --sp-lh-mono: 1.5;
  --sp-track-figure: -0.055em;
  --sp-track-display: -0.045em;
  --sp-track-title: -0.03em;
  --sp-track-headline: -0.015em;
  --sp-track-caps: 0.08em;
  --sp-weight-regular: 400;
  --sp-weight-medium: 500;
  --sp-weight-semibold: 600;
  --sp-weight-bold: 700;

  /* Space: 4px base */
  --sp-space-1: 4px;
  --sp-space-2: 8px;
  --sp-space-3: 12px;
  --sp-space-4: 16px;
  --sp-space-5: 20px;
  --sp-space-6: 24px;
  --sp-space-7: 32px;
  --sp-space-8: 40px;
  --sp-space-9: 48px;
  --sp-space-10: 64px;
  --sp-space-11: 80px;
  --sp-space-12: 96px;
  --sp-space-13: 128px;
  --sp-section-pad: clamp(4rem, 2.6rem + 5vw, 8rem);           /* 64 to 128 */

  /* Shape: zero radius everywhere. Circles appear only as shapes (radios, chart dots), never as corners. */
  --sp-radius-none: 0px;
  --sp-radius-btn: 0px;
  --sp-radius-input: 0px;
  --sp-radius-card: 0px;
  --sp-rule-w: 1px;
  --sp-rule-heavy: 2px;

  /* Grid: 12 columns from 960px, 8 from 640px, 4 below */
  --sp-content: 1320px;
  --sp-measure: 40rem;
  --sp-gutter: clamp(1.25rem, 0.5rem + 2.6vw, 2.5rem);          /* 20 to 40: page side padding */
  --sp-gap: clamp(1rem, 0.75rem + 0.8vw, 1.5rem);               /* 16 to 24: column gap */
  --sp-cols: 12;
  --sp-nav-h: 64px;

  /* Motion */
  --sp-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --sp-ease-draw: cubic-bezier(0.65, 0, 0.35, 1);
  --sp-dur-fast: 120ms;
  --sp-dur: 200ms;
  --sp-dur-draw: 900ms;
}

@media (max-width: 959px) {
  :root {
    --sp-cols: 8;
  }
}

@media (max-width: 639px) {
  :root {
    --sp-cols: 4;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --sp-paper: #0d0d0d;
    --sp-surface: #0d0d0d;
    --sp-sunk: #1a1a1b;
    --sp-scrim: rgba(0, 0, 0, 0.72);
    --sp-ink: #ffffff;
    --sp-body: #e8e8e8;
    --sp-muted: #a3a8ae;
    --sp-rule: #ffffff;
    --sp-hair: #2a2a2b;
    --sp-hair-strong: #3c3c3e;
    --sp-line-control: #7c8187;
    --sp-grid-line: #252526;
    --sp-accent: #ff4f00;
    --sp-accent-hover: #ff6d29;
    --sp-accent-ink: #000000;
    --sp-accent-text: #ff8a4f;
    --sp-accent-soft: #2b1306;
    --sp-mark: #ff4f00;
    --sp-focus: #ff6a1f;
    --sp-ok: #5fd38b;
    --sp-ok-soft: #10261a;
    --sp-warn: #f0b04a;
    --sp-warn-soft: #2a1f0c;
    --sp-danger: #ff7b8a;
    --sp-danger-soft: #33121a;
    --sp-viz-1: #ff6a26;
    --sp-viz-2: #f0f0f0;
    --sp-viz-3: #5f9be6;
    --sp-viz-4: #72787e;
    --sp-viz-5: #52d1b5;
    --sp-viz-6: #d9b57a;
    --sp-seq-1: #2b1306;
    --sp-seq-2: #6b2a0a;
    --sp-seq-3: #b84200;
    --sp-seq-4: #ff6a26;
    --sp-seq-5: #ffb28c;
    --sp-div-1: #5f9be6;
    --sp-div-2: #2c4a70;
    --sp-div-3: #2a2a2b;
    --sp-div-4: #8a3a14;
    --sp-div-5: #ff6a26;
    --sp-shadow-pop: 0 1px 0 rgba(0, 0, 0, 0.5), 0 18px 40px -16px rgba(0, 0, 0, 0.9);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --sp-paper: #0d0d0d;
  --sp-surface: #0d0d0d;
  --sp-sunk: #1a1a1b;
  --sp-scrim: rgba(0, 0, 0, 0.72);
  --sp-ink: #ffffff;
  --sp-body: #e8e8e8;
  --sp-muted: #a3a8ae;
  --sp-rule: #ffffff;
  --sp-hair: #2a2a2b;
  --sp-hair-strong: #3c3c3e;
  --sp-line-control: #7c8187;
  --sp-grid-line: #252526;
  --sp-accent: #ff4f00;
  --sp-accent-hover: #ff6d29;
  --sp-accent-ink: #000000;
  --sp-accent-text: #ff8a4f;
  --sp-accent-soft: #2b1306;
  --sp-mark: #ff4f00;
  --sp-focus: #ff6a1f;
  --sp-ok: #5fd38b;
  --sp-ok-soft: #10261a;
  --sp-warn: #f0b04a;
  --sp-warn-soft: #2a1f0c;
  --sp-danger: #ff7b8a;
  --sp-danger-soft: #33121a;
  --sp-viz-1: #ff6a26;
  --sp-viz-2: #f0f0f0;
  --sp-viz-3: #5f9be6;
  --sp-viz-4: #72787e;
  --sp-viz-5: #52d1b5;
  --sp-viz-6: #d9b57a;
  --sp-seq-1: #2b1306;
  --sp-seq-2: #6b2a0a;
  --sp-seq-3: #b84200;
  --sp-seq-4: #ff6a26;
  --sp-seq-5: #ffb28c;
  --sp-div-1: #5f9be6;
  --sp-div-2: #2c4a70;
  --sp-div-3: #2a2a2b;
  --sp-div-4: #8a3a14;
  --sp-div-5: #ff6a26;
  --sp-shadow-pop: 0 1px 0 rgba(0, 0, 0, 0.5), 0 18px 40px -16px rgba(0, 0, 0, 0.9);
}

/* Accent preset: signal-yellow. Yellow is only ever a fill behind black. On light paper the
   large-text mark falls back to ink, because yellow type on white can't be read. */
:root[data-accent="signal-yellow"] {
  --sp-accent: #ffd400;
  --sp-accent-hover: #f2c200;
  --sp-accent-ink: #000000;
  --sp-accent-text: #5c4700;
  --sp-accent-soft: #fff4bf;
  --sp-mark: #000000;
  --sp-focus: #000000;
}

@media (prefers-color-scheme: dark) {
  :root[data-accent="signal-yellow"]:not([data-theme="light"]) {
    --sp-accent: #ffd400;
    --sp-accent-hover: #ffe04d;
    --sp-accent-ink: #000000;
    --sp-accent-text: #ffd84d;
    --sp-accent-soft: #2a2300;
    --sp-mark: #ffd400;
    --sp-focus: #ffd400;
  }
}

:root[data-accent="signal-yellow"][data-theme="dark"] {
  --sp-accent: #ffd400;
  --sp-accent-hover: #ffe04d;
  --sp-accent-ink: #000000;
  --sp-accent-text: #ffd84d;
  --sp-accent-soft: #2a2300;
  --sp-mark: #ffd400;
  --sp-focus: #ffd400;
}

/* Accent preset: signal-green. A vivid green that, like the orange, works both as a fill behind
   black and as large type on paper. */
:root[data-accent="signal-green"] {
  --sp-accent: #00a651;
  --sp-accent-hover: #008f45;
  --sp-accent-ink: #000000;
  --sp-accent-text: #005a2b;
  --sp-accent-soft: #ddf5e6;
  --sp-mark: #00a651;
  --sp-focus: #007a3a;
}

@media (prefers-color-scheme: dark) {
  :root[data-accent="signal-green"]:not([data-theme="light"]) {
    --sp-accent: #1fd46e;
    --sp-accent-hover: #4ee08c;
    --sp-accent-ink: #000000;
    --sp-accent-text: #5ee597;
    --sp-accent-soft: #0b2416;
    --sp-mark: #1fd46e;
    --sp-focus: #1fd46e;
  }
}

:root[data-accent="signal-green"][data-theme="dark"] {
  --sp-accent: #1fd46e;
  --sp-accent-hover: #4ee08c;
  --sp-accent-ink: #000000;
  --sp-accent-text: #5ee597;
  --sp-accent-soft: #0b2416;
  --sp-mark: #1fd46e;
  --sp-focus: #1fd46e;
}