:root {
  color-scheme: light;
  --color-surface: #F5F3F0;
  --color-surface-raised: #FAFAF8;
  --color-surface-sunken: #EEEBE6;
  --color-hairline: #E4E0DA;
  --color-ink: #0A0A0A;
  --color-ink-strong: #000000;
  --color-ink-muted: #5A5856;
  --color-ink-faint: #9A9692;
  --color-brand-gradient-start: #FF7A6B;
  --color-brand-gradient-end: #FFD9B8;
  --color-brand-accent: #FF7A6B;
  --color-pnl-up: #16A34A;
  --color-pnl-down: #DC2626;
  --color-state-live: #16A34A;
  --color-state-view: #D97706;
  --color-state-paused: #D97706;
  --color-state-halted: #DC2626;
  --color-state-muted: #9A9692;
  --color-sector-coral: #F77E81;
  --color-sector-blue: #3E83E8;
  --color-sector-teal: #60B4B0;
  --color-sector-purple: #A270C5;
  --color-sector-slate: #8987B6;
  --color-sector-pink: #DF639F;
  --color-sector-rose: #E75F91;
  --color-sector-green: #7EC783;
  --color-sector-sand: #DFC3A7;
  --color-sector-cyan: #57CECF;
  --color-sector-indigo: #577DD4;
  --color-sector-mauve: #BA85A4;
  --color-sector-gray: #A6A09E;
  --color-sector-olive: #89A59B;
  --color-primary: #0A0A0A;

  --rounded-none: 0px;
  --rounded-xs: 4px;
  --rounded-sm: 8px;
  --rounded-md: 12px;
  --rounded-lg: 16px;
  --rounded-xl: 24px;
  --rounded-pill: 999px;

  --space-none: 0px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --color-surface: #0A0A0A;
    --color-surface-raised: #161616;
    --color-surface-sunken: #050505;
    --color-hairline: #262626;
    --color-ink: #E0E0E0;
    --color-ink-strong: #FFFFFF;
    --color-ink-muted: #888888;
    --color-ink-faint: #555555;
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --color-surface: #F5F3F0;
  --color-surface-raised: #FAFAF8;
  --color-surface-sunken: #EEEBE6;
  --color-hairline: #E4E0DA;
  --color-ink: #0A0A0A;
  --color-ink-strong: #000000;
  --color-ink-muted: #5A5856;
  --color-ink-faint: #9A9692;
  --color-brand-gradient-start: #FF7A6B;
  --color-brand-gradient-end: #FFD9B8;
  --color-brand-accent: #FF7A6B;
  --color-pnl-up: #16A34A;
  --color-pnl-down: #DC2626;
  --color-state-live: #16A34A;
  --color-state-view: #D97706;
  --color-state-paused: #D97706;
  --color-state-halted: #DC2626;
  --color-state-muted: #9A9692;
  --color-sector-coral: #F77E81;
  --color-sector-blue: #3E83E8;
  --color-sector-teal: #60B4B0;
  --color-sector-purple: #A270C5;
  --color-sector-slate: #8987B6;
  --color-sector-pink: #DF639F;
  --color-sector-rose: #E75F91;
  --color-sector-green: #7EC783;
  --color-sector-sand: #DFC3A7;
  --color-sector-cyan: #57CECF;
  --color-sector-indigo: #577DD4;
  --color-sector-mauve: #BA85A4;
  --color-sector-gray: #A6A09E;
  --color-sector-olive: #89A59B;
  --color-primary: #0A0A0A;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-surface: #0A0A0A;
  --color-surface-raised: #161616;
  --color-surface-sunken: #050505;
  --color-hairline: #262626;
  --color-ink: #E0E0E0;
  --color-ink-strong: #FFFFFF;
  --color-ink-muted: #888888;
  --color-ink-faint: #555555;
}

.type-display-xl { font-family: Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 72px; font-weight: 600; line-height: 1.0; letter-spacing: -0.04em; font-feature-settings: "tnum" 1; }
.type-display-lg { font-family: Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 48px; font-weight: 600; line-height: 1.05; letter-spacing: -0.03em; font-feature-settings: "tnum" 1; }
.type-h1 { font-family: Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 32px; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; }
.type-h2 { font-family: Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.type-h3 { font-family: Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 16px; font-weight: 600; line-height: 1.4; }
.type-body { font-family: Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; }
.type-body-strong { font-family: Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.5; }
.type-caption { font-family: Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: 0.04em; }
.type-label { font-family: Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.3; letter-spacing: 0.08em; }
.type-mono { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; font-feature-settings: "tnum" 1; }