/* SphereHarness design tokens - a VERBATIM copy of sphereharness-design/design-system/tokens.css
   (https://github.com/PLM-CAD-UTILITIES-AS/sphereharness-design, branch v136-charcoal, commit 1485a13; 1.3.6 redesign,
   approved 2026-10-09). Do not edit here: change tokens.json in the design repository, run build_tokens.py, copy again.
   Dark is the default theme; [data-theme="light"] (the toggle, localStorage "sh-theme") switches to paper. */
/* Generated from tokens.json by build_tokens.py - do not edit by hand. */
:root, [data-theme="dark"] {
  color-scheme: dark;
  --paper: #0c0d10;
  --paper-lift: #1c1f26;
  --surface: #15171c;
  --surface-raised: #1c1f26;
  --surface-sunken: #08090b;
  --line: #262a32;
  --line-strong: #5a606c;
  --ink: #f3f4f1;
  --ink-muted: #a6aab2;
  --accent: #e8531a;
  --on-accent: #14161a;
  --accent-ink: #ff8452;
  --accent-soft: #2a1a12;
  --success: #5bd69a;
  --success-soft: #11291d;
  --warning: #f2b84b;
  --warning-soft: #33270d;
  --danger: #ff8a80;
  --danger-soft: #3a1714;
  --shadow-panel: 0 1px 0 rgba(255,255,255,0.03) inset, 0 24px 48px -24px rgba(0,0,0,0.65);
  --ground: radial-gradient(120% 80% at 50% 0%, #1c1f26 0%, #0c0d10 70%);
  --brand-blend: linear-gradient(var(--accent), var(--accent));
  --brand-blend-soft: linear-gradient(var(--accent-soft), var(--accent-soft));
  --layout-blue: var(--accent-ink);
  --on-layout-blue: var(--on-accent);
  --layout-blue-soft: var(--accent-soft);
  --signal-cyan: var(--accent);
  --cyan-ink: var(--accent-ink);
  --cyan-soft: var(--accent-soft);
  --grip-orange: var(--accent);
  --on-grip: var(--on-accent);
  --grip-ink: var(--accent-ink);
  --grip-soft: var(--accent-soft);
}
[data-theme="light"] {
  color-scheme: light;
  --paper: #f3f4f1;
  --paper-lift: #fbfbf9;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: #e8e9e4;
  --line: #d8d9d2;
  --line-strong: #878b93;
  --ink: #0c0d10;
  --ink-muted: #4e535c;
  --accent: #e8531a;
  --on-accent: #14161a;
  --accent-ink: #a83a0e;
  --accent-soft: #fbe4d8;
  --success: #1c7045;
  --success-soft: #dcf1e4;
  --warning: #8a5a00;
  --warning-soft: #fbeccc;
  --danger: #b42318;
  --danger-soft: #fbe2df;
  --shadow-panel: 0 1px 0 rgba(12,13,16,0.04), 0 18px 40px -22px rgba(12,13,16,0.35);
  --ground: radial-gradient(120% 80% at 50% 0%, #fbfbf9 0%, #f3f4f1 70%);
}
:root {
  --font-sans: "Archivo", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;
  --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;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
.display { font-family: var(--font-sans); font-size: clamp(2.5rem, 5.2vw, 4.75rem); line-height: 1.02; font-weight: 780; font-stretch: 118%; letter-spacing: -0.03em; }
.heading-1 { font-family: var(--font-sans); font-size: clamp(1.75rem, 3vw, 2.75rem); line-height: 1.1; font-weight: 760; font-stretch: 112%; letter-spacing: -0.02em; }
.heading-2 { font-family: var(--font-sans); font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -0.01em; }
.heading-3 { font-family: var(--font-sans); font-size: 19px; line-height: 26px; font-weight: 650; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 26px; font-weight: 400; }
.body-sm { font-family: var(--font-sans); font-size: 14px; line-height: 22px; font-weight: 400; }
.label { font-family: var(--font-sans); font-size: 11px; line-height: 16px; font-weight: 650; letter-spacing: 0.08em; }
.command { font-family: var(--font-mono); font-size: 14px; line-height: 22px; font-weight: 450; }
.operation { font-family: var(--font-mono); font-size: 12px; line-height: 18px; font-weight: 500; }