/* Generated from packages/shared/src/design by `pnpm gen:tokens`. Do not edit by hand. */
:root {
  --bg: #ffffff;
  --bg-soft: #fafafa;
  --surface: #ffffff;
  --line: #f2f2f2;
  --line-strong: #e3e3e3;
  --control-edge: #8f8f8f;
  --ink: #0a0a0a;
  --ink-muted: #646464;
  --ink-inverse: #fafafa;
  --on-duty: #15803d;
  --on-duty-bg: #e9f7ee;
  --idle: #a15c07;
  --idle-bg: #fdf4e2;
  --alert: #c81e1e;
  --alert-bg: #fdeded;
  --brand-pink: #ff6987;
  --brand-orange: #ff984f;
  --brand-violet: #b987ff;
  --brand-cyan: #38dbff;
  --star: #ffb020;
  --gradient-brand: linear-gradient(89deg, #ff6987 -22%, #ff984f 24%, #b987ff 58%, #38dbff 119%);
  --mesh-dawn: radial-gradient(120% 90% at 0% 0%, #ffc8d4 0%, transparent 55.00000000000001%), radial-gradient(90% 80% at 100% 10%, #ffd8bd 0%, transparent 55.00000000000001%), radial-gradient(120% 90% at 70% 110.00000000000001%, #e6d5ff 0%, transparent 60%), #fffaf8;
  --mesh-dusk: radial-gradient(110.00000000000001% 90% at 100% 0%, #dccaff 0%, transparent 55.00000000000001%), radial-gradient(100% 80% at 0% 100%, #c2f0ff 0%, transparent 60%), radial-gradient(70% 60% at 20% 10%, #ffe1e8 0%, transparent 60%), #fbfaff;
  --mesh-day: radial-gradient(80% 70% at 10% 20%, #ffccd7 0%, transparent 60%), radial-gradient(70% 70% at 45% 0%, #ffdcc4 0%, transparent 60%), radial-gradient(80% 80% at 75% 60%, #e4d4ff 0%, transparent 60%), radial-gradient(70% 70% at 100% 100%, #c6f2ff 0%, transparent 60%), #ffffff;
  --mesh-aurora: radial-gradient(70% 60% at 0% 0%, rgba(255,105,135,0.55) 0%, transparent 60%), radial-gradient(60% 60% at 100% 0%, rgba(255,152,79,0.35) 0%, transparent 60%), radial-gradient(80% 70% at 100% 100%, rgba(56,219,255,0.4) 0%, transparent 60%), radial-gradient(70% 70% at 30% 110.00000000000001%, rgba(185,135,255,0.5) 0%, transparent 60%), #0a0a0a;
  --glow: 0 10px 28px -6px rgba(255,105,135,0.45), 0 14px 36px -10px rgba(56,219,255,0.45);
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-40: 40px;
  --space-60: 60px;
  --space-80: 80px;
  --radius-10: 10px;
  --radius-16: 16px;
  --radius-18: 18px;
  --radius-20: 20px;
  --radius-24: 24px;
  --radius-30: 30px;
  --radius-40: 40px;
  --radius-pill: 999px;
  --fs-display: 48px;
  --lh-display: 56px;
  --ls-display: -1.2px;
  --fw-display: 600;
  --fs-heading-xl: 30px;
  --lh-heading-xl: 36px;
  --ls-heading-xl: -0.6px;
  --fw-heading-xl: 600;
  --fs-heading: 20px;
  --lh-heading: 28px;
  --ls-heading: -0.3px;
  --fw-heading: 600;
  --fs-title: 18px;
  --lh-title: 26px;
  --ls-title: -0.18px;
  --fw-title: 500;
  --fs-lead: 18px;
  --lh-lead: 28px;
  --ls-lead: -0.1px;
  --fw-lead: 400;
  --fs-body: 16px;
  --lh-body: 24px;
  --ls-body: 0px;
  --fw-body: 400;
  --fs-label: 15px;
  --lh-label: 21px;
  --ls-label: 0px;
  --fw-label: 500;
  --fs-button: 14px;
  --lh-button: 20px;
  --ls-button: 0px;
  --fw-button: 500;
  --fs-small: 13px;
  --lh-small: 18px;
  --ls-small: 0px;
  --fw-small: 400;
  --fs-micro: 12px;
  --lh-micro: 16px;
  --ls-micro: 0.1px;
  --fw-micro: 500;
  --font-sans: 'Google Sans Flex', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Google Sans Code', ui-monospace, Menlo, monospace;
  --shadow-button: 0 1px 2px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.08);
  --shadow-tile: 0 1px 1px rgba(0,0,0,0.02), 0 8px 24px rgba(0,0,0,0.06);
  --shadow-pop: 0 8px 32px rgba(0,0,0,0.14), 0 2px 6px rgba(0,0,0,0.08);
  --scrim: rgba(10,10,10,0.35);
  --control-sm: 36px;
  --control-md: 44px;
  --control-lg: 54px;
  --control-touchMin: 48px;
  color-scheme: light;
}

/* Dark follows the system unless the person picked light; data-theme="dark" forces it (decision 62). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #0a0a0b;
    --bg-soft: #131315;
    --surface: #18181b;
    --line: #232327;
    --line-strong: #2f2f35;
    --control-edge: #76767f;
    --ink: #fafafa;
    --ink-muted: #a3a3a3;
    --ink-inverse: #0a0a0a;
    --on-duty: #4ad08a;
    --on-duty-bg: #0f2a1b;
    --idle: #f5b74a;
    --idle-bg: #2b2110;
    --alert: #ff7a7a;
    --alert-bg: #2e1414;
    --brand-pink: #ff6987;
    --brand-orange: #ff984f;
    --brand-violet: #b987ff;
    --brand-cyan: #38dbff;
    --star: #ffb020;
    --mesh-dawn: radial-gradient(120% 90% at 0% 0%, rgba(255,105,135,0.22) 0%, transparent 55.00000000000001%), radial-gradient(90% 80% at 100% 10%, rgba(255,152,79,0.16) 0%, transparent 55.00000000000001%), radial-gradient(120% 90% at 70% 110.00000000000001%, rgba(185,135,255,0.2) 0%, transparent 60%), #18181b;
    --mesh-dusk: radial-gradient(110.00000000000001% 90% at 100% 0%, rgba(185,135,255,0.22) 0%, transparent 55.00000000000001%), radial-gradient(100% 80% at 0% 100%, rgba(56,219,255,0.16) 0%, transparent 60%), radial-gradient(70% 60% at 20% 10%, rgba(255,105,135,0.14) 0%, transparent 60%), #18181b;
    --mesh-day: radial-gradient(80% 70% at 10% 20%, rgba(255,105,135,0.22) 0%, transparent 60%), radial-gradient(70% 70% at 45% 0%, rgba(255,152,79,0.16) 0%, transparent 60%), radial-gradient(80% 80% at 75% 60%, rgba(185,135,255,0.2) 0%, transparent 60%), radial-gradient(70% 70% at 100% 100%, rgba(56,219,255,0.18) 0%, transparent 60%), #18181b;
    --mesh-aurora: radial-gradient(70% 60% at 0% 0%, rgba(255,105,135,0.55) 0%, transparent 60%), radial-gradient(60% 60% at 100% 0%, rgba(255,152,79,0.35) 0%, transparent 60%), radial-gradient(80% 70% at 100% 100%, rgba(56,219,255,0.4) 0%, transparent 60%), radial-gradient(70% 70% at 30% 110.00000000000001%, rgba(185,135,255,0.5) 0%, transparent 60%), #0a0a0a;
    --shadow-button: 0 1px 2px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.4);
    --shadow-tile: 0 1px 1px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.45);
    --shadow-pop: 0 8px 32px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.4);
    --scrim: rgba(0,0,0,0.6);
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --bg: #0a0a0b;
  --bg-soft: #131315;
  --surface: #18181b;
  --line: #232327;
  --line-strong: #2f2f35;
  --control-edge: #76767f;
  --ink: #fafafa;
  --ink-muted: #a3a3a3;
  --ink-inverse: #0a0a0a;
  --on-duty: #4ad08a;
  --on-duty-bg: #0f2a1b;
  --idle: #f5b74a;
  --idle-bg: #2b2110;
  --alert: #ff7a7a;
  --alert-bg: #2e1414;
  --brand-pink: #ff6987;
  --brand-orange: #ff984f;
  --brand-violet: #b987ff;
  --brand-cyan: #38dbff;
  --star: #ffb020;
  --mesh-dawn: radial-gradient(120% 90% at 0% 0%, rgba(255,105,135,0.22) 0%, transparent 55.00000000000001%), radial-gradient(90% 80% at 100% 10%, rgba(255,152,79,0.16) 0%, transparent 55.00000000000001%), radial-gradient(120% 90% at 70% 110.00000000000001%, rgba(185,135,255,0.2) 0%, transparent 60%), #18181b;
  --mesh-dusk: radial-gradient(110.00000000000001% 90% at 100% 0%, rgba(185,135,255,0.22) 0%, transparent 55.00000000000001%), radial-gradient(100% 80% at 0% 100%, rgba(56,219,255,0.16) 0%, transparent 60%), radial-gradient(70% 60% at 20% 10%, rgba(255,105,135,0.14) 0%, transparent 60%), #18181b;
  --mesh-day: radial-gradient(80% 70% at 10% 20%, rgba(255,105,135,0.22) 0%, transparent 60%), radial-gradient(70% 70% at 45% 0%, rgba(255,152,79,0.16) 0%, transparent 60%), radial-gradient(80% 80% at 75% 60%, rgba(185,135,255,0.2) 0%, transparent 60%), radial-gradient(70% 70% at 100% 100%, rgba(56,219,255,0.18) 0%, transparent 60%), #18181b;
  --mesh-aurora: radial-gradient(70% 60% at 0% 0%, rgba(255,105,135,0.55) 0%, transparent 60%), radial-gradient(60% 60% at 100% 0%, rgba(255,152,79,0.35) 0%, transparent 60%), radial-gradient(80% 70% at 100% 100%, rgba(56,219,255,0.4) 0%, transparent 60%), radial-gradient(70% 70% at 30% 110.00000000000001%, rgba(185,135,255,0.5) 0%, transparent 60%), #0a0a0a;
  --shadow-button: 0 1px 2px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.4);
  --shadow-tile: 0 1px 1px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.45);
  --shadow-pop: 0 8px 32px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.4);
  --scrim: rgba(0,0,0,0.6);
  color-scheme: dark;
}