/* AI in Prevention · visual tokens v0.1 · 2026-09-04
 * Source: Design System Inheritance §8.1 and the official production handoff.
 * These values are reviewable design choices, not changes to locked behavior.
 * Reference → semantic → surface aliases. Import fonts.css separately.
 */

/* Reference palette. Walk Away uses orange-red, following the mockup's hue. */
:root {
  --ref-forest-950: #08291f;
  --ref-forest-900: #0f3d2e;
  --ref-forest-800: #19563f;
  --ref-forest-100: #e7eee8;
  --ref-paper-50: #fdfcfa;
  --ref-paper-100: #f7f5f1;
  --ref-paper-200: #edeae3;
  --ref-stone-300: #dddad2;
  --ref-stone-500: #817f75;
  --ref-stone-600: #626459;
  --ref-stone-900: #30352f;
  --ref-amber-100: #fff2cf;
  --ref-amber-400: #f2b531;
  --ref-amber-800: #765000;
  --ref-red-100: #fff1e9;
  --ref-red-700: #f4511e;
  --ref-red-900: #8b3215;
  --ref-red-950: #25160f;
}

/* Surface, text and action roles. Borders: decorative vs essential controls. */
:root {
  --color-canvas: var(--ref-paper-100);
  --color-surface: var(--ref-paper-50);
  --color-surface-subtle: var(--ref-paper-200);
  --color-surface-inverse: var(--ref-forest-900);
  --color-ink: var(--ref-stone-900);
  --color-ink-heading: var(--ref-forest-900);
  --color-ink-muted: var(--ref-stone-600);
  --color-ink-inverse: var(--ref-paper-50);
  --color-ink-inverse-muted: var(--ref-stone-300);
  --color-border: var(--ref-stone-300);
  --color-border-strong: var(--ref-stone-500);
  --color-accent: var(--ref-red-700);
  --color-signature-dot: var(--ref-red-700);
  --color-link: var(--ref-forest-800);
  --color-action-primary: var(--ref-forest-900);
  --color-action-primary-hover: var(--ref-forest-800);
  --color-action-primary-active: var(--ref-forest-950);
  --color-action-on-primary: var(--ref-paper-50);
  --color-action-secondary: var(--ref-paper-50);
  --color-action-on-secondary: var(--ref-forest-900);
  --color-selected-surface: var(--ref-forest-100);
  --color-selected-border: var(--ref-forest-900);
  --color-disabled-surface: var(--ref-paper-200);
  --color-disabled-ink: var(--ref-stone-600);
  --color-focus: var(--ref-forest-900);
  --color-focus-inverse: var(--ref-paper-50);
  --color-selection-surface: var(--ref-amber-100);
  --color-selection-ink: var(--ref-forest-950);
  --color-choice-surface: var(--color-surface);
  --color-choice-hover: var(--color-canvas);
  --color-choice-selected: var(--color-selected-surface);
  --color-choice-selected-border: var(--color-selected-border);
  --color-choice-selected-ink: var(--color-ink-heading);
  --color-choice-ink: var(--color-ink);
  --color-choice-border: var(--color-border-strong);
}

/* Decision meanings are locked; these specific swatches are proposed. */
:root {
  --color-decision-go-ahead: var(--ref-forest-900);
  --color-decision-go-ahead-surface: var(--ref-forest-100);
  --color-decision-go-ahead-ink: var(--ref-forest-900);
  --color-decision-go-ahead-on-solid: var(--ref-paper-50);
  --color-decision-watch: var(--ref-amber-400);
  --color-decision-watch-surface: var(--ref-amber-100);
  --color-decision-watch-ink: var(--ref-amber-800);
  --color-decision-watch-on-solid: var(--ref-forest-950);
  --color-decision-walk-away: var(--ref-red-700);
  --color-decision-walk-away-surface: var(--ref-red-100);
  --color-decision-walk-away-ink: var(--ref-red-900);
  --color-decision-walk-away-on-solid: var(--ref-red-950);
}

/* Teaching cards identify three harms independently from the decision scale. */
:root {
  --color-harm-context: var(--ref-forest-900);
  --color-harm-context-ink: var(--ref-paper-50);
  --color-harm-work: var(--ref-amber-400);
  --color-harm-work-ink: var(--ref-forest-950);
  --color-harm-work-heading: var(--ref-amber-800);
  --color-harm-work-tint-deep: color-mix(in srgb, var(--color-harm-work) 75%, var(--color-surface));
  --color-harm-work-tint-medium: color-mix(in srgb, var(--color-harm-work) 50%, var(--color-surface));
  --color-harm-work-tint-light: color-mix(in srgb, var(--color-harm-work) 25%, var(--color-surface));
  --color-harm-trust: var(--ref-red-900);
  --color-harm-trust-ink: var(--ref-paper-50);
  --size-harm-symbol: 14rem;
}

/* Operational feedback is independent from decision categories. Pair with text. */
:root {
  --color-status-success: var(--ref-forest-800);
  --color-status-success-surface: var(--ref-forest-100);
  --color-status-warning: var(--ref-amber-800);
  --color-status-warning-surface: var(--ref-amber-100);
  --color-status-error: var(--ref-red-900);
  --color-status-error-surface: var(--ref-red-100);
  --color-status-info: var(--ref-forest-900);
  --color-status-info-surface: var(--ref-paper-200);
}

/* Font roles do not choose HTML heading levels. Sizes use rem for user zoom.
 * No eyebrow role. Put useful metadata below the heading or in its own context.
 */
:root {
  --font-reflective: "Fraunces", Georgia, "Times New Roman", serif;
  --font-practical: "Hanken Grotesk", "Segoe UI", Arial, sans-serif;
  --font-code: Consolas, "SFMono-Regular", monospace;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-choice-label: var(--weight-regular);
  --leading-display: 1.08;
  --leading-heading: 1.2;
  --leading-question: 1.3;
  --leading-body: 1.5;
  --leading-control: 1.25;
  --leading-caption: 1.4;
  --leading-data: 1.2;
  --tracking-display: -0.025em;
  --tracking-heading: -0.015em;
  --tracking-body: 0em;
  --type-display-family: var(--font-reflective);
  --type-heading-family: var(--font-reflective);
  --type-question-family: var(--font-reflective);
  --type-body-family: var(--font-practical);
  --type-control-family: var(--font-practical);
  --type-caption-family: var(--font-practical);
  --type-data-family: var(--font-practical);
  --type-display-size: 3.5rem;
  --type-heading-size: 2.25rem;
  --type-question-size: 1.75rem;
  --type-body-size: 1.125rem;
  --type-control-size: 1rem;
  --type-caption-size: 0.875rem;
  --type-data-size: 2rem;
  --type-display-weight: var(--weight-bold);
  --type-heading-weight: var(--weight-medium);
  --type-question-weight: var(--weight-medium);
  --type-body-weight: var(--weight-regular);
  --type-control-weight: var(--weight-semibold);
  --type-caption-weight: var(--weight-medium);
  --type-data-weight: var(--weight-semibold);
  --type-display-leading: var(--leading-display);
  --type-heading-leading: var(--leading-heading);
  --type-question-leading: var(--leading-question);
  --type-body-leading: var(--leading-body);
  --type-control-leading: var(--leading-control);
  --type-caption-leading: var(--leading-caption);
  --type-data-leading: var(--leading-data);
  --type-display-tracking: var(--tracking-display);
  --type-heading-tracking: var(--tracking-heading);
  --type-question-tracking: var(--tracking-heading);
  --type-body-tracking: var(--tracking-body);
  --type-control-tracking: var(--tracking-body);
  --type-caption-tracking: var(--tracking-body);
  --type-data-tracking: var(--tracking-body);
}

/* Four-pixel rhythm. Semantic gaps inherit these steps. */
:root {
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-inline: var(--space-2);
  --space-control-gap: var(--space-3);
  --space-control-inset-inline: var(--space-4);
  --space-control-inset-block: var(--space-3);
  --space-field-gap: var(--space-6);
  --space-section-gap: var(--space-12);
  --space-page-inset: var(--space-6);
  --space-stage-inset: var(--space-16);
  --space-reading-card-inset: var(--space-5);
  --size-touch-target-min: 2.75rem;
  --size-control: 3rem;
  --size-icon: 1.25rem;
  --size-choice-stripe: 0.5rem;
  --size-signature-dot: 0.2em;
  --space-signature-dot: 0.08em;
  --size-clicker-forward: 10rem;
  --size-clicker-back: 5rem;
  --size-reading-width: 65ch;
  --size-phone-content: 30rem;
  --size-remote-content: 48rem;
  --size-spotlight-card-width: 28rem;
  --size-stage-width: 1920px;
  --size-stage-height: 1080px;
  --size-stage-ratio: 16 / 9;
}

/* Quiet shape; elevation is optional, never the sole grouping cue. */
:root {
  --border-width: 1px;
  --border-width-emphasis: 2px;
  --radius-control: 0.375rem;
  --radius-panel: 0.625rem;
  --radius-round: 50%;
  --shadow-panel: 0 1px 2px rgb(8 41 31 / 0.05), 0 8px 28px rgb(8 41 31 / 0.065);
  --shadow-evidence: 0 2px 3px rgb(8 41 31 / 0.04), 0 16px 40px rgb(8 41 31 / 0.08);
  --size-brand: 3rem;
  --size-brand-wordmark: 22rem;
  --type-brand-name-size: 2rem;
  --type-brand-tagline-size: 0.875rem;
  --color-paper-rule: rgb(15 61 46 / 0.045);
  --surface-paper: none;
  --focus-width: 3px;
  --focus-offset: 3px;
  --focus-ring: var(--focus-width) solid var(--color-focus);
  --focus-ring-inverse: var(--focus-width) solid var(--color-focus-inverse);
  --layer-base: 0;
  --layer-sticky: 10;
  --layer-feedback: 20;
}

/* Motion is presentation only. Keyboard actions and live data stay immediate.
 * Prefer interruptible transform/opacity transitions. Never wait for animation
 * to accept input, announce state, or apply an authoritative response.
 */
:root {
  --motion-duration-instant: 0ms;
  --motion-duration-press: 120ms;
  --motion-duration-feedback: 160ms;
  --motion-duration-enter: 200ms;
  --motion-duration-exit: 140ms;
  --motion-duration-reveal: 240ms;
  --motion-duration-magnify: 420ms;
  --motion-duration-dot-drop: 420ms;
  --motion-duration-typewriter: 1400ms;
  --motion-duration-overlay: 280ms;
  --motion-duration-data: 0ms;
  --motion-duration-reduced: 120ms;
  --motion-easing-out: cubic-bezier(0.23, 1, 0.32, 1);
  --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-easing-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --motion-easing-overlay: cubic-bezier(0.32, 0.72, 0, 1);
  --motion-easing-linear: linear;
  --motion-distance-small: 0.25rem;
  --motion-distance-reveal: 0.5rem;
  --motion-distance-notice: 0.75rem;
  --motion-distance-drawer: 100%;
  --motion-scale-press: 0.98;
  --motion-scale-enter: 0.97;
  --motion-scale-stamp: 1.06;
  --motion-rotation-stamp: -1deg;
  --motion-scale-stamp-impact: 1.65;
  --motion-distance-stamp-impact: -6rem;
  --motion-easing-impact: cubic-bezier(0.55, 0, 1, 0.45);
  --motion-delay-none: 0ms;
  --motion-delay-stagger: 40ms;
  --motion-delay-stagger-max: 120ms;
  --motion-delay-tooltip: 400ms;
  --motion-delay-controls-idle: 2500ms;
}

/* Chart geometry never defines the domain meaning or changes coordinates. */
:root {
  --chart-axis-color: var(--ref-stone-600);
  --chart-grid-color: var(--ref-stone-300);
  --chart-dot-color: var(--ref-forest-800);
  --chart-dot-outline: var(--ref-paper-50);
  --chart-spotlight-color: var(--ref-forest-950);
  --chart-axis-width: 2px;
  --chart-dot-size: 0.75rem;
  --chart-dot-gap: 0.375rem;
  --chart-personal-dot-size: 1rem;
  --chart-spotlight-ring-width: 3px;
  --chart-spotlight-ring-gap: 3px;
  --chart-region-opacity-muted: 0.2;
  --size-decision-plot: 26rem;
  --size-decision-axis-rail: 14rem;
  --size-decision-narrow-rail: 3rem;
  --type-decision-axis-size: 1rem;
  --type-decision-label-size: 1rem;
}

/* Surface aliases live at the owning surface root. Screen assumes 1920 × 1080. */
[data-surface="screen"] {
  --type-display-size: 5rem;
  --size-decision-plot: 38rem;
  --size-decision-axis-rail: 18rem;
  --size-decision-narrow-rail: 4rem;
  --type-decision-axis-size: 1.875rem;
  --type-decision-label-size: 2rem;
  --type-heading-size: 3.5rem;
  --type-question-size: 3rem;
  --type-body-size: 2.25rem;
  --type-control-size: 2rem;
  --type-caption-size: 1.875rem;
  --type-data-size: 3rem;
  --type-body-leading: 1.35;
  --space-inline: var(--space-4);
  --space-control-gap: var(--space-6);
  --space-field-gap: var(--space-8);
  --space-section-gap: var(--space-12);
  --space-page-inset: var(--space-stage-inset);
  --space-reading-card-inset: var(--space-8);
  --space-screen-counter-inset: calc(var(--space-stage-inset) + var(--space-4));
  --chart-dot-size: 1.125rem;
  --chart-dot-gap: 0.5rem;
  --size-brand: 5rem;
  --type-source-size: 1.875rem;
  --type-source-compact-size: 1.5rem;
  --type-source-dense-size: 1.125rem;
  --type-source-reference-size: 0.8125rem;
  --type-source-collection-size: 1.5rem;
  --type-source-leading: 1.3;
  --blur-text-obscured: 0.4em;
  --type-source-detail-size: 1.5rem;
  --type-screen-meta-size: 1.875rem;
  --type-source-focus-size: 3rem;
  --type-source-document-size: 1.375rem;
  --type-source-document-dense-size: 0.875rem;
  --size-source-document-width: 66rem;
  --scale-source-document-aside: 0.53;
  --type-source-comparison-size: 2rem;
  --type-source-facsimile-size: 0.875rem;
  --type-source-facsimile-dense-size: 0.625rem;
  --space-source-paragraph: 0.65em;
  --space-screen-reading-gap: var(--space-16);
  --space-screen-reading-inset: var(--space-12);
  --size-screen-reading-label: var(--space-16);
  --type-source-letter-size: 1.625rem;
  --size-screen-letter-width: 88%;
  --size-screen-teaching-plot: 44rem;
  --size-screen-map-rail: 14rem;
  --size-screen-map-title: 25rem;
  --size-screen-reference-plot: 18rem;
  --size-screen-reference-rail: 10rem;
  --size-screen-reference-column: 41rem;
  --size-screen-question-anchor: 18rem;
  --size-screen-question-endpoints: 7rem;
  --size-screen-result-plot: 21rem;
  --size-screen-placement-plot: 23rem;
  --size-screen-spotlight-plot: 14rem;
  --size-screen-category-card: calc(var(--space-16) * 5);
  --size-screen-opening-join: 40rem;
  --size-screen-opening-brand: 7rem;
  --size-screen-opening-qr: 33rem;
  --space-screen-opening-top: 12rem;
  --type-screen-opening-size: 7rem;
  --type-task-size: 1.625rem;
  --space-task-gap: var(--space-3);
  --type-spotlight-name-size: 2.25rem;
  --type-spotlight-detail-size: 1.625rem;
}

[data-surface="participant"] {
  --type-display-size: 2.5rem;
  --type-heading-size: 2rem;
  --type-question-size: 1.75rem;
  --type-body-size: 1.125rem;
  --type-control-size: 1.125rem;
  --type-caption-size: 1rem;
  --type-data-size: 1.75rem;
  --space-page-inset: var(--space-5);
  --space-section-gap: var(--space-8);
  --size-control: 3.25rem;
}

[data-surface="remote"] {
  --type-heading-family: var(--font-practical);
  --type-question-family: var(--font-practical);
  --type-heading-weight: var(--weight-semibold);
  --type-question-weight: var(--weight-semibold);
  --type-display-size: 2.5rem;
  --type-heading-size: 1.5rem;
  --type-question-size: 1.5rem;
  --type-body-size: 1rem;
  --type-control-size: 1rem;
  --type-caption-size: 0.875rem;
  --type-data-size: 2rem;
  --space-page-inset: var(--space-4);
  --space-field-gap: var(--space-4);
  --space-section-gap: var(--space-6);
  --size-control: 3rem;
}

[data-surface="field-guide"] {
  --type-display-size: 3rem;
  --type-heading-size: 2rem;
  --type-question-size: 1.5rem;
  --type-body-size: 1.125rem;
  --type-control-size: 1.125rem;
  --type-caption-size: 1rem;
  --type-data-size: 1.5rem;
  --type-body-leading: 1.65;
  --space-page-inset: var(--space-6);
  --space-section-gap: var(--space-12);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-press: var(--motion-duration-reduced);
    --motion-duration-feedback: var(--motion-duration-reduced);
    --motion-duration-enter: var(--motion-duration-reduced);
    --motion-duration-exit: var(--motion-duration-reduced);
    --motion-duration-reveal: var(--motion-duration-reduced);
    --motion-duration-magnify: var(--motion-duration-reduced);
    --motion-duration-overlay: var(--motion-duration-reduced);
    --motion-distance-small: 0rem;
    --motion-distance-reveal: 0rem;
    --motion-distance-notice: 0rem;
    --motion-distance-drawer: 0%;
    --motion-scale-press: 1;
    --motion-scale-enter: 1;
    --motion-scale-stamp: 1;
    --motion-rotation-stamp: 0deg;
    --motion-scale-stamp-impact: 1;
    --motion-distance-stamp-impact: 0rem;
    --motion-delay-stagger: var(--motion-duration-instant);
    --motion-delay-stagger-max: var(--motion-duration-instant);
    --motion-delay-tooltip: var(--motion-duration-instant);
  }
}

/* Pulse identity colors: tints and marks share a hue, labels carry meaning without color. */
:root {
  --color-pulse-skeptic: #aa5738; --color-pulse-skeptic-surface: #f1e0d5;
  --color-pulse-curious: #9b751a; --color-pulse-curious-surface: #f4ebcf;
  --color-pulse-pragmatist: #39776b; --color-pulse-pragmatist-surface: #dcebe3;
  --color-pulse-evangelist: #426846; --color-pulse-evangelist-surface: #e5ecda;
  --size-switch-width: 3.5rem; --size-switch-height: 2rem;
  --type-pulse-axis-size: 1rem; --type-pulse-label-size: 1rem;
  --size-pulse-result-content: 52rem;
  --size-pulse-personal-plot: 26rem;
  --size-pulse-axis-rail: 1.5rem;
}
[data-surface="screen"] {
  --type-pulse-axis-size: 2rem; --type-pulse-label-size: 2.25rem;
  --type-pulse-question-size: 4rem;
}