/* GENERATED by tools/design/tokens.mjs from design/tokens.css (npm run tokens). Do not edit; change the design file and regenerate. */
/* TrueSit design tokens. Source of truth for every surface: phone, watch, web app, site.
 * Built 2026-10-03 from design/brand/BRAND.md by the design-system chat (Step 1). Edit DESIGN.md and this file together.
 * Light first; dark is the same names under [data-theme="dark"] and prefers-color-scheme. Hue never changes between themes.
 * Hallmark · pre-emit critique: P5 H4 E5 S5 R5 V4 · theme: custom (tuned) · vibe: "chalk line on lumber, level, plainspoken, sturdy"
 * paper: oklch(97% 0.010 80) · accent: oklch(50% 0.150 258) Chalk · display: Archivo · body: Archivo · readout: Azeret Mono
 * axes: light / display-heavy (Archivo 700 to 800) / blue-258 · contrast: pass (see DESIGN.md section 9) · studied: no (brand is our own)
 */
:root {
  color-scheme: light;
  --color-paper: oklch(98.5% 0.005 80); /* #FCFAF6 */
  --color-card: oklch(99.4% 0.003 80); /* #FEFDFB */
  --color-paper-2: oklch(95.5% 0.008 80); /* #F3F0EA */
  --color-paper-3: oklch(92% 0.01 80); /* #E8E4DD */
  --color-rule: oklch(89% 0.01 80); /* #DEDAD3 */
  --color-rule-2: oklch(93% 0.008 80); /* #EBE7E2 */
  --color-ink: oklch(24% 0.012 70); /* #231E19 */
  --color-ink-2: oklch(42% 0.012 70); /* #514C46 */
  --color-muted: oklch(52% 0.012 70); /* #6E6862 */
  --color-accent: oklch(50% 0.15 258); /* #2460B7 */
  --color-accent-hover: oklch(45% 0.15 258); /* #1351A6 */
  --color-accent-ink: oklch(99.3% 0.004 80); /* #FEFCFA */
  --color-accent-lifted: oklch(50% 0.15 258); /* #2460B7 */
  --color-accent-soft: oklch(94% 0.028 258); /* #E0ECFE */
  --color-focus: oklch(52% 0.19 258); /* #0462D3 */
  --color-heard: oklch(46% 0.11 150); /* #1D6835 */
  --color-heard-soft: oklch(93% 0.035 150); /* #D8EFDC */
  --color-partial: oklch(50% 0.105 75); /* #865901 */
  --color-partial-soft: oklch(94% 0.045 80); /* #FBE9CA */
  --color-missed: oklch(48% 0.17 25); /* #A92227 */
  --color-missed-soft: oklch(93% 0.035 25); /* #FFDFDC */
  --color-warning: oklch(50% 0.105 75); /* #865901 */
  --color-warning-soft: oklch(94% 0.045 80); /* #FBE9CA */
  --color-danger: oklch(48% 0.17 25); /* #A92227 */
  --color-danger-soft: oklch(93% 0.035 25); /* #FFDFDC */
  --color-info: oklch(45% 0.05 258); /* #445671 */
  --color-info-soft: oklch(93% 0.015 258); /* #E2E8F2 */
  --color-chart-1: oklch(50% 0.15 258); /* #2460B7 */
  --color-chart-2: oklch(55% 0.13 40); /* #AF5331 */
  --color-chart-3: oklch(58% 0.1 190); /* #018D87 */
  --color-chart-4: oklch(50% 0.12 320); /* #814A8D */
  --color-chart-5: oklch(54% 0.12 118); /* #697710 */
  --color-chart-other: oklch(55% 0.03 80); /* #7B705E */
  /* Wide outcome bars (round 11, V3-REVIEW P2 12): the status hues muted, checked as one set
     (tools/design/palette-check.mjs: Sold, PNS, Follow-up, Other in that order). */
  --color-bar-heard: oklch(40% 0.1 150); /* #115629 */
  --color-bar-missed: oklch(64% 0.1 25); /* #C2736D */
  --color-bar-partial: oklch(48% 0.1 75); /* #7E5403 */
  --color-bar-other: oklch(64% 0.03 80); /* #968B78 */
  --color-heat-1: oklch(94% 0.025 258); /* #E1ECFC */
  --color-heat-2: oklch(86% 0.06 258); /* #B9D3F9 */
  --color-heat-3: oklch(74% 0.1 258); /* #83ADEA */
  --color-heat-4: oklch(66% 0.12 258); /* #6293DB */
  --color-heat-5: oklch(52% 0.15 258); /* #2A67BD */
  --color-rail-rep: var(--color-ink-2);
  --color-rail-homeowner-1: var(--color-chart-2);
  --color-rail-homeowner-2: var(--color-chart-3);
  --color-rail-participant-3: var(--color-chart-4);
  --color-rail-participant-4: var(--color-chart-5);
  --color-rail-unresolved: var(--color-muted);
  --color-level-track: var(--color-rule);
  --color-level-fill: var(--color-accent);
  --color-bubble-true: var(--color-accent);
  --color-bubble-off: var(--color-partial);
  --color-bubble-reported: var(--color-ink-2);
  --color-bubble-real: var(--color-accent);
  --color-chart-grid: var(--color-rule-2);
  --color-chart-axis: var(--color-muted);
  --color-div-neg: var(--color-chart-2);
  --color-div-mid: var(--color-rule);
  --color-div-pos: var(--color-chart-1);
  /* the third colour (round 11, NEEDS-DAVID 37): option 1, a warm sand for quiet surfaces only (section bands,
   * the quote panel, the trust strip); never text, never a mark, never a button. Option 2 is behind
   * [data-third="bold"] below. on-third is the text on a third surface; third-mark is the third colour as a
   * line or mark (option 1 has none, so it is the rule). */
  --color-third: oklch(93.9% 0.02 85); /* #F1EADC */
  --color-third-soft: var(--color-third);
  --color-on-third: var(--color-ink);
  --color-third-mark: var(--color-rule);

  /* type */
  --font-ui:
    'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; /* display, text, labels, buttons; variable weight 400 to 800, width 100 */
  --font-readout:
    'Azeret Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* the live elapsed timer and the big sit score only; every other number is Archivo with tabular figures */
  --wordmark-weight: 800; /* the wordmark is Archivo 800 at font-stretch 118%, tracking -0.02em, roman */
  --wordmark-stretch: 118%;
  --text-2xs: 0.6875rem; /* 11 px, desktop table captions only */
  --text-xs: 0.75rem; /* 12 px, chips, timestamps, axis labels */
  --text-sm: 0.8125rem; /* 13 px, secondary text, table cells on desktop */
  --text-base: 1rem; /* 16 px, body and inputs (16 px stops iOS zoom) */
  --text-md: 1.125rem; /* 18 px, card titles, sheet titles */
  --text-lg: 1.375rem; /* 22 px, screen titles on the phone */
  --text-xl: 1.75rem; /* 28 px, page titles on desktop, KPI labels */
  --text-2xl: 2.25rem; /* 36 px, section display on the site */
  --text-3xl: 3rem; /* 48 px, site display at 1440 */
  --text-display: clamp(2.5rem, 1.5rem + 4.2vw, 4rem); /* 40 to 64 px, the site hero headline */
  --text-section: clamp(
    2.25rem,
    1.2rem + 2vw,
    3rem
  ); /* 36 to 48 px, the site v2's section titles (round 11) */
  --text-reason: clamp(
    1.375rem,
    1rem + 1.2vw,
    1.75rem
  ); /* 22 to 28 px, the reasons on the site's claim (round 11) */
  --readout-sm: 0.875rem; /* 14 px readouts in lists */
  --readout-md: 1.125rem; /* 18 px readouts in cards */
  --readout-lg: 1.75rem; /* 28 px readouts in KPI cards and the band on the watch */
  --readout-xl: 2.75rem; /* 44 px: the elapsed timer on the live screen, the score */
  --lh-tight: 1.1; /* display and titles */
  --lh-snug: 1.25; /* card titles, chips, buttons */
  --lh-base: 1.5; /* body */
  --weight-regular: 400;
  --weight-medium: 500; /* labels, chips */
  --weight-semibold: 600; /* buttons, card titles, readouts */
  --weight-bold: 700; /* screen titles */
  --weight-black: 800; /* wordmark and site display only */
  --tracking-display: -0.02em; /* titles 28 px and up */
  --tracking-label: 0; /* labels are sentence case, never tracked caps */

  /* spacing, 4 px scale */
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* layout and sizes */
  --gutter-phone: 16px; /* page gutter at 390 */
  --gutter-desktop: 32px; /* page gutter at 1440 */
  --measure: 66ch; /* prose max width */
  --container-site: 1200px; /* site content width */
  --container-app: 1376px; /* app content width at 1440 (1440 minus two gutters) */
  --sidebar-w: 240px; /* web app sidebar */
  --nav-h: 56px; /* web top bar and site header */
  --tab-bar-h: 56px; /* phone tab bar: Sits, Mentor, Me */
  --band-h: 44px; /* the status band on the phone */
  --band-h-watch: 28px; /* the status band on the watch */
  --control-h: 44px; /* buttons and inputs on the phone and in forms */
  --control-h-sm: 36px; /* chips, segmented controls, table actions; the tap-target floor */
  --control-h-lg: 52px; /* the one primary action on a phone screen */
  --touch-min: 36px; /* no interactive element smaller than this */
  --rail-w: 3px; /* speaker rail */
  --level-h: 8px; /* level glyph track height */
  --level-h-control: 12px; /* the record control track */
  --bubble: 20px; /* bubble diameter in the record control */
  --bubble-sm: 10px; /* bubble in stage glyphs */
  --score-ring: 72px; /* coverage and score ring */
  --bp-phone: 390px; /* first-class width 1 (documentation only; media queries use the values below) */
  --bp-desktop: 1440px; /* first-class width 2 */

  /* radii */
  --radius-xs: 6px; /* tags, swatches, skeleton bars */
  --radius-sm: 8px; /* buttons, inputs */
  --radius-md: 12px; /* cards */
  --radius-lg: 18px; /* sheets, dialogs */
  --radius-pill: 999px; /* chips, segmented controls */
  --radius-icon-ios: 22.37%; /* app icon tile */

  /* borders and elevation */
  --hairline: 1px solid var(--color-rule); /* every card and input */
  --hairline-2: 1px solid var(--color-rule-2); /* rows inside a card */
  --shadow-card: 0 1px 2px oklch(20% 0.01 70 / 0.04); /* cards: the one shadow, 1 px at 4 percent ink */
  --shadow-raised: 0 1px 2px oklch(20% 0.01 70 / 0.06); /* the selected nav row */
  --shadow-selected: 0 1px 2px oklch(20% 0.01 70 / 0.08); /* the selected segment */

  /* motion: the only brand motion is the bubble settling; everything else is an opacity crossfade at --dur-fast */
  --dur-press: 120ms; /* press feedback, chip and tab state */
  --dur-fast: 180ms; /* crossfades, hover, menus */
  --dur-settle: 220ms; /* the bubble settling into center, row expand */
  --dur-slow: 320ms; /* sheets and drawers, page transitions */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* strong ease-out, every UI response */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* on-screen movement between two places */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* sheets and drawers */
  --ease-settle: cubic-bezier(0.23, 1, 0.32, 1); /* alias of ease-out for the level glyphs */
  --spring-settle: spring(
    1 100 10 0
  ); /* Reanimated and Motion spring for the bubble: mass 1, stiffness 100, damping 10 (documentation token) */

  /* z layers */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 20;
  --z-band: 100;
  --z-sheet: 200;
  --z-overlay: 300;
  --z-toast: 400;
}

[data-theme='dark'] {
  color-scheme: dark;
  --color-paper: oklch(16% 0.01 80); /* #100D09 */
  --color-card: oklch(20% 0.01 80); /* #181611 */
  --color-paper-2: oklch(23% 0.01 80); /* #1F1C18 */
  --color-paper-3: oklch(27% 0.01 80); /* #292621 */
  --color-rule: oklch(31% 0.01 80); /* #33302B */
  --color-rule-2: oklch(26% 0.01 80); /* #27241F */
  --color-ink: oklch(93% 0.008 80); /* #EBE7E2 */
  --color-ink-2: oklch(80% 0.008 80); /* #C0BDB8 */
  --color-muted: oklch(66% 0.008 80); /* #95928D */
  --color-accent: oklch(54% 0.15 258); /* #306DC4 */
  --color-accent-hover: oklch(50% 0.15 258); /* #2460B7 */
  --color-accent-ink: oklch(99.3% 0.004 80); /* #FEFCFA */
  --color-accent-lifted: oklch(74% 0.11 258); /* #7FACF0 */
  --color-accent-soft: oklch(27% 0.06 258); /* #132643 */
  --color-focus: oklch(74% 0.13 258); /* #76ACFC */
  --color-heard: oklch(74% 0.12 150); /* #6FC082 */
  --color-heard-soft: oklch(27% 0.05 150); /* #122D19 */
  --color-partial: oklch(78% 0.13 80); /* #E3AD4B */
  --color-partial-soft: oklch(28% 0.05 80); /* #362607 */
  --color-missed: oklch(72% 0.15 25); /* #F47B74 */
  --color-missed-soft: oklch(27% 0.05 25); /* #3B1C1A */
  --color-warning: oklch(78% 0.13 80); /* #E3AD4B */
  --color-warning-soft: oklch(28% 0.05 80); /* #362607 */
  --color-danger: oklch(72% 0.15 25); /* #F47B74 */
  --color-danger-soft: oklch(27% 0.05 25); /* #3B1C1A */
  --color-info: oklch(76% 0.05 258); /* #9EB3D1 */
  --color-info-soft: oklch(27% 0.03 258); /* #1D2735 */
  --color-chart-1: oklch(64% 0.13 258); /* #588CDA */
  --color-chart-2: oklch(64% 0.13 40); /* #CD6E4C */
  --color-chart-3: oklch(58% 0.1 190); /* #018D87 */
  --color-chart-4: oklch(67% 0.13 320); /* #B879C7 */
  --color-chart-5: oklch(64% 0.12 118); /* #869638 */
  --color-chart-other: oklch(70% 0.03 80); /* #A89D8A */
  --color-bar-heard: oklch(68% 0.1 150); /* #69AA77 */
  --color-bar-missed: oklch(56% 0.1 25); /* #A75C56 */
  --color-bar-partial: oklch(76% 0.1 75); /* #D6A866 */
  --color-bar-other: oklch(56% 0.03 80); /* #7E7361 */
  --color-heat-1: oklch(24% 0.05 258); /* #0F1F37 */
  --color-heat-2: oklch(36% 0.09 258); /* #1C3C6B */
  --color-heat-3: oklch(48% 0.13 258); /* #295CA5 */
  --color-heat-4: oklch(60% 0.14 258); /* #4780D2 */
  --color-heat-5: oklch(74% 0.11 258); /* #7FACF0 */
  --color-third: oklch(26.7% 0.023 84); /* #2B2519 */
  --shadow-card: none; /* dark elevation is a lighter surface */
  --shadow-raised: none;
  --shadow-selected: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --color-paper: oklch(16% 0.01 80); /* #100D09 */
    --color-card: oklch(20% 0.01 80); /* #181611 */
    --color-paper-2: oklch(23% 0.01 80); /* #1F1C18 */
    --color-paper-3: oklch(27% 0.01 80); /* #292621 */
    --color-rule: oklch(31% 0.01 80); /* #33302B */
    --color-rule-2: oklch(26% 0.01 80); /* #27241F */
    --color-ink: oklch(93% 0.008 80); /* #EBE7E2 */
    --color-ink-2: oklch(80% 0.008 80); /* #C0BDB8 */
    --color-muted: oklch(66% 0.008 80); /* #95928D */
    --color-accent: oklch(54% 0.15 258); /* #306DC4 */
    --color-accent-hover: oklch(50% 0.15 258); /* #2460B7 */
    --color-accent-ink: oklch(99.3% 0.004 80); /* #FEFCFA */
    --color-accent-lifted: oklch(74% 0.11 258); /* #7FACF0 */
    --color-accent-soft: oklch(27% 0.06 258); /* #132643 */
    --color-focus: oklch(74% 0.13 258); /* #76ACFC */
    --color-heard: oklch(74% 0.12 150); /* #6FC082 */
    --color-heard-soft: oklch(27% 0.05 150); /* #122D19 */
    --color-partial: oklch(78% 0.13 80); /* #E3AD4B */
    --color-partial-soft: oklch(28% 0.05 80); /* #362607 */
    --color-missed: oklch(72% 0.15 25); /* #F47B74 */
    --color-missed-soft: oklch(27% 0.05 25); /* #3B1C1A */
    --color-warning: oklch(78% 0.13 80); /* #E3AD4B */
    --color-warning-soft: oklch(28% 0.05 80); /* #362607 */
    --color-danger: oklch(72% 0.15 25); /* #F47B74 */
    --color-danger-soft: oklch(27% 0.05 25); /* #3B1C1A */
    --color-info: oklch(76% 0.05 258); /* #9EB3D1 */
    --color-info-soft: oklch(27% 0.03 258); /* #1D2735 */
    --color-chart-1: oklch(64% 0.13 258); /* #588CDA */
    --color-chart-2: oklch(64% 0.13 40); /* #CD6E4C */
    --color-chart-3: oklch(58% 0.1 190); /* #018D87 */
    --color-chart-4: oklch(67% 0.13 320); /* #B879C7 */
    --color-chart-5: oklch(64% 0.12 118); /* #869638 */
    --color-chart-other: oklch(70% 0.03 80); /* #A89D8A */
    --color-bar-heard: oklch(68% 0.1 150); /* #69AA77 */
    --color-bar-missed: oklch(56% 0.1 25); /* #A75C56 */
    --color-bar-partial: oklch(76% 0.1 75); /* #D6A866 */
    --color-bar-other: oklch(56% 0.03 80); /* #7E7361 */
    --color-heat-1: oklch(24% 0.05 258); /* #0F1F37 */
    --color-heat-2: oklch(36% 0.09 258); /* #1C3C6B */
    --color-heat-3: oklch(48% 0.13 258); /* #295CA5 */
    --color-heat-4: oklch(60% 0.14 258); /* #4780D2 */
    --color-heat-5: oklch(74% 0.11 258); /* #7FACF0 */
    --color-third: oklch(26.7% 0.023 84); /* #2B2519 */
    --shadow-card: none;
    --shadow-raised: none;
    --shadow-selected: none;
  }
}

/* The third colour, option 2 (round 11, NEEDS-DAVID 37): a bold spruce, one flip away from option 1. One
 * bold band a page with on-third text, spruce as a mark (rules, the sit line) on paper, its soft tint for
 * quiet surfaces. Never a button: blue stays the only action colour. */
[data-third='bold'] {
  --color-third: oklch(42.7% 0.067 174); /* #1E5B4C */
  --color-third-soft: oklch(94.2% 0.013 167); /* #E4EFEA */
  --color-on-third: var(--color-paper);
  --color-third-mark: oklch(42.7% 0.067 174); /* #1E5B4C */
}
[data-theme='dark'][data-third='bold'],
[data-theme='dark'] [data-third='bold'] {
  --color-third: oklch(40.5% 0.062 173); /* #1E5446 */
  --color-third-soft: oklch(25.2% 0.024 164); /* #17261F */
  --color-on-third: var(--color-ink);
  --color-third-mark: oklch(70.6% 0.091 172); /* #5FB39A */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light'])[data-third='bold'],
  :root:not([data-theme='light']) [data-third='bold'] {
    --color-third: oklch(40.5% 0.062 173); /* #1E5446 */
    --color-third-soft: oklch(25.2% 0.024 164); /* #17261F */
    --color-on-third: var(--color-ink);
    --color-third-mark: oklch(70.6% 0.091 172); /* #5FB39A */
  }
}

/* base: every surface inherits these; components add nothing to :root */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  scrollbar-color: var(--color-rule) var(--color-paper);
  scrollbar-width: thin;
}
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  font-weight: var(--weight-regular);
  overflow-x: clip;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
::selection {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.tnum,
table,
.readout {
  font-variant-numeric: tabular-nums slashed-zero;
}
.readout {
  font-family: var(--font-readout);
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
} /* the live timer and the big score only */
.num {
  font-variant-numeric: tabular-nums slashed-zero;
} /* every other number stays in Archivo */
button {
  font: inherit;
  color: inherit;
}
.wordmark {
  font-family: var(--font-ui);
  font-weight: var(--wordmark-weight);
  font-stretch: var(--wordmark-stretch);
  letter-spacing: var(--tracking-display);
  line-height: 1;
  font-style: normal;
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-press: 0ms;
    --dur-fast: 0ms;
    --dur-settle: 0ms;
    --dur-slow: 0ms;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0ms !important;
    transition-duration: 0ms !important;
  }
}