/* GENERATED by tools/redesign/sync-tokens.mjs — do not edit by hand. DNA: spark-arc */
:root {
  color-scheme: light;
  --z-color-bg: #F3F6F9;
  --z-color-bg-subtle: #E8EEF4;
  --z-color-surface: #FFFFFF;
  --z-color-elevated: #FFFFFF;
  --z-color-border: #D5DEE8;
  --z-color-border-strong: #B7C5D4;
  --z-color-text-1: #0B1F33;
  --z-color-text-2: #3D5166;
  --z-color-text-3: #6B7C8D;
  --z-color-signal: #0EA5E9;
  --z-color-signal-subtle: #E0F2FE;
  --z-color-primary: #0369A1;
  --z-color-primary-hover: #075985;
  --z-color-primary-pressed: #0C4A6E;
  --z-color-on-primary: #FFFFFF;
  --z-color-accent: #E8FF47;
  --z-color-on-accent: #1A2200;
  --z-color-success: #0F7A4A;
  --z-color-success-subtle: #D1FAE5;
  --z-color-warning: #B45309;
  --z-color-warning-subtle: #FEF3C7;
  --z-color-danger: #BE123C;
  --z-color-danger-subtle: #FFE4E6;
  --z-color-info: #0369A1;
  --z-color-info-subtle: #E0F2FE;
  --z-color-shadow: rgba(11, 31, 51, 0.10);
  --z-font-display: "Syne", system-ui, sans-serif;
  --z-font-body: "Figtree", system-ui, sans-serif;
  --z-fs-display-xl: clamp(2.4rem, 4vw, 3.5rem);
  --z-fs-display: clamp(1.85rem, 2.6vw, 2.4rem);
  --z-fs-h1: 1.75rem;
  --z-fs-h2: 1.375rem;
  --z-fs-h3: 1.125rem;
  --z-fs-h4: 1rem;
  --z-fs-body-lg: 1.0625rem;
  --z-fs-body: 0.9375rem;
  --z-fs-body-sm: 0.8125rem;
  --z-fs-caption: 0.75rem;
  --z-fs-overline: 0.6875rem;
  --z-lh-display: 1.1;
  --z-lh-body: 1.45;
  --z-tracking-display: -0.03em;
  --z-space-1: 4px;
  --z-space-2: 8px;
  --z-space-3: 12px;
  --z-space-4: 16px;
  --z-space-5: 20px;
  --z-space-6: 24px;
  --z-space-8: 32px;
  --z-space-10: 40px;
  --z-space-12: 48px;
  --z-radius-xs: 4px;
  --z-radius-sm: 6px;
  --z-radius-md: 10px;
  --z-radius-lg: 14px;
  --z-radius-xl: 18px;
  --z-radius-arc: 2px;
  --z-z-base: 1;
  --z-z-sticky: 20;
  --z-z-dropdown: 40;
  --z-z-sheet: 60;
  --z-z-modal: 80;
  --z-z-toast: 100;
  --z-touch: 44px;
  --z-motion-instant: 80ms;
  --z-motion-fast: 140ms;
  --z-motion-normal: 220ms;
  --z-motion-slow: 400ms;
  --z-ease: cubic-bezier(0.16, 1, 0.28, 1);
  --z-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --z-press-scale: 0.97;
  --z-shadow-sm: 0 1px 2px var(--z-color-shadow);
  --z-shadow-md: 0 8px 24px -12px var(--z-color-shadow);
  --z-shadow-lg: 0 20px 40px -24px var(--z-color-shadow);
  --z-bg: var(--z-color-bg);
  --z-cta: var(--z-color-primary);
  --z-on-cta: var(--z-color-on-primary);
}

[data-z-theme="dark"],
.z-theme-dark {
  color-scheme: dark;
  --z-color-bg: #071018;
  --z-color-bg-subtle: #0E1A24;
  --z-color-surface: #12202C;
  --z-color-elevated: #173042;
  --z-color-border: #243848;
  --z-color-border-strong: #355064;
  --z-color-text-1: #F3F6F9;
  --z-color-text-2: #B7C5D4;
  --z-color-text-3: #7A8B9C;
  --z-color-signal: #38BDF8;
  --z-color-signal-subtle: #0C4A6E;
  --z-color-primary: #38BDF8;
  --z-color-primary-hover: #7DD3FC;
  --z-color-primary-pressed: #0EA5E9;
  --z-color-on-primary: #0B1F33;
  --z-color-accent: #E8FF47;
  --z-color-on-accent: #1A2200;
  --z-color-success: #34D399;
  --z-color-success-subtle: #064E3B;
  --z-color-warning: #FBBF24;
  --z-color-warning-subtle: #78350F;
  --z-color-danger: #FB7185;
  --z-color-danger-subtle: #4C0519;
  --z-color-info: #38BDF8;
  --z-color-info-subtle: #0C4A6E;
  --z-color-shadow: rgba(0, 0, 0, 0.40);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-z-theme="light"]) {
  --z-color-bg: #071018;
  --z-color-bg-subtle: #0E1A24;
  --z-color-surface: #12202C;
  --z-color-elevated: #173042;
  --z-color-border: #243848;
  --z-color-border-strong: #355064;
  --z-color-text-1: #F3F6F9;
  --z-color-text-2: #B7C5D4;
  --z-color-text-3: #7A8B9C;
  --z-color-signal: #38BDF8;
  --z-color-signal-subtle: #0C4A6E;
  --z-color-primary: #38BDF8;
  --z-color-primary-hover: #7DD3FC;
  --z-color-primary-pressed: #0EA5E9;
  --z-color-on-primary: #0B1F33;
  --z-color-accent: #E8FF47;
  --z-color-on-accent: #1A2200;
  --z-color-success: #34D399;
  --z-color-success-subtle: #064E3B;
  --z-color-warning: #FBBF24;
  --z-color-warning-subtle: #78350F;
  --z-color-danger: #FB7185;
  --z-color-danger-subtle: #4C0519;
  --z-color-info: #38BDF8;
  --z-color-info-subtle: #0C4A6E;
  --z-color-shadow: rgba(0, 0, 0, 0.40);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --z-motion-instant: 1ms;
    --z-motion-fast: 1ms;
    --z-motion-normal: 1ms;
    --z-motion-slow: 1ms;
  }
  .z-arc-loader, .z-spark-draw, .z-press { animation: none !important; transition: none !important; }
}