/* Happlo Design Exploration 2026 tokens. Generated from brand/claude-design-studio-2026-09-21/design-system/project/tokens.json. Do not edit by hand; edit the design system and regenerate. */
:root, [data-theme="light"] {
  --surface-page: #faf9f5;
  --surface-card: #ffffff;
  --surface-tint: #fff3d9;
  --surface-navy: #0e2741;
  --ink: #10243c;
  --ink-muted: #53616a;
  --ink-on-navy: #faf9f5;
  --ink-on-orange: #10243c;
  --line: #dce0df;
  --line-strong: #10243c;
  --orange: #ff8a00;
  --orange-hover: #f28300;
  --orange-text: #8f4700;
  --orange-tint: #ffe1b8;
  --navy-hover: #1e3654;
  --focus-ring: #10243c;
  --focus-halo: #faf9f5;
  --gecko-ground: #fff3d9;
  --status-good-fill: #dff5e3;
  --status-good-text: #14612a;
  --status-warn-fill: #fff0c2;
  --status-warn-text: #6b4a00;
  --status-bad-fill: #fde2dc;
  --status-bad-text: #8a2412;
  --status-info-fill: #e3ecf7;
  --status-info-text: #1b3f6b;
  --rank-1-3: #21ca24;
  --rank-1-3-text: #073b12;
  --rank-4-7: #a6d521;
  --rank-4-7-text: #243506;
  --rank-8-10: #ffda1e;
  --rank-8-10-text: #413300;
  --rank-11-20: #ff921d;
  --rank-11-20-text: #492500;
  --rank-21-100: #ec4a29;
  --rank-21-100-text: #2e0803;
  --rank-not-found: #8d273d;
  --rank-not-found-text: #ffffff;
  --rank-no-data: #e3e6e7;
  --rank-no-data-text: #35454d;
  --rank-no-data-border: #69767d;
  --rank-center: #10243c;
  --rank-center-gap: #ffffff;
  --chart-now: #ff8a00;
  --chart-before: #7d8f9f;
  --chart-grid: #dce0df;
  --chart-missing: #e3e6e7;
  --ai-mark-ink: #10243c;
  --shadow-edge-orange: 11px 12px 0 #ff8a00;
  --shadow-edge-navy: 10px 10px 0 #10243c;
  --shadow-edge-small: 6px 7px 0 #ff8a00;
  --shadow-card: 0 8px 20px #10243c0c;
  --shadow-float: 0 12px 26px #00132814;
}
[data-theme="navy"] {
  --surface-page: #10243c;
  --surface-card: #17304d;
  --surface-tint: #22395a;
  --surface-navy: #0e2741;
  --ink: #faf9f5;
  --ink-muted: #b9c4cf;
  --ink-on-navy: #faf9f5;
  --ink-on-orange: #10243c;
  --line: #3f5876;
  --line-strong: #faf9f5;
  --orange: #ff8a00;
  --orange-hover: #f28300;
  --orange-text: #ffa640;
  --orange-tint: #3a2a10;
  --navy-hover: #1e3654;
  --focus-ring: #ffa640;
  --focus-halo: #10243c;
  --gecko-ground: #fff3d9;
  --status-good-fill: #153b22;
  --status-good-text: #7fe39a;
  --status-warn-fill: #3d2f0a;
  --status-warn-text: #ffd66b;
  --status-bad-fill: #4a1a12;
  --status-bad-text: #ffa392;
  --status-info-fill: #1c3352;
  --status-info-text: #9cc4ee;
  --rank-1-3: #21ca24;
  --rank-1-3-text: #073b12;
  --rank-4-7: #a6d521;
  --rank-4-7-text: #243506;
  --rank-8-10: #ffda1e;
  --rank-8-10-text: #413300;
  --rank-11-20: #ff921d;
  --rank-11-20-text: #492500;
  --rank-21-100: #ec4a29;
  --rank-21-100-text: #2e0803;
  --rank-not-found: #8d273d;
  --rank-not-found-text: #ffffff;
  --rank-no-data: #e3e6e7;
  --rank-no-data-text: #35454d;
  --rank-no-data-border: #69767d;
  --rank-center: #10243c;
  --rank-center-gap: #ffffff;
  --chart-now: #ff8a00;
  --chart-before: #7d8f9f;
  --chart-grid: #3f5876;
  --chart-missing: #e3e6e7;
  --ai-mark-ink: #faf9f5;
  --shadow-edge-orange: 11px 12px 0 #ff8a00;
  --shadow-edge-navy: 10px 10px 0 #fff3d9;
  --shadow-edge-small: 6px 7px 0 #ff8a00;
  --shadow-card: 0 8px 20px #00000055;
  --shadow-float: 0 12px 26px #00000077;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --gutter-mobile: 20px;
  --gutter-desktop: 64px;
  --content-max: 1200px;
  --touch-target: 44px;
  --edge-offset: 12px;
  --mark-dot: 8px;
  --route-line: 3px;
  --stop-size: 44px;
  --radius-control: 10px;
  --radius-card: 20px;
  --radius-panel: 24px;
  --radius-badge: 999px;
  --radius-image: 12px;
  --radius-bar: 4px;
  --font-display: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-email: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}