:root {

  --Color-semantic-error: #FB7285FF;
  --Color-semantic-warning: #FBBF24FF;
  --Color-semantic-success: #34D399FF;
  --Color-text-muted: #FFFFFF80;
  --Color-text-secondary: #FFFFFFA8;
  --Color-text-primary: #FFFFFFFF;
  --Color-brand-onPrimary: #04061AFF;
  --Color-brand-aurora: #B1E2FFFF;
  --Color-brand-primaryHover: #66EBF8FF;
  --Color-glass-stroke: #FFFFFF29;
  --Color-glass-fill: #FFFFFF0F;
  --Color-bg-surface: #13131FFF;
  --Color-brand-primary: #22D3EEFF;
  --Color-bg-base: #0A0A14FF;

  --Spacing-gutter-mobile: 20px;
  --Spacing-gutter-desktop: 80px;
  --Spacing-space-16: 64px;
  --Spacing-space-12: 48px;
  --Spacing-space-8: 32px;
  --Spacing-space-6: 24px;
  --Spacing-space-4: 16px;
  --Spacing-space-3: 12px;
  --Spacing-space-2: 8px;
  --Spacing-space-1: 4px;

  --Elevation-shadow-drop: 40px;
  --Elevation-shadow-glow: 32px;
  --Elevation-blur-aurora: 40px;
  --Elevation-blur-nav: 32px;
  --Elevation-blur-glass: 40px;

  --Type-leading-body: 1.6;
  --Type-leading-tight: 1.2;
  --Type-size-h2Mobile: 28px;
  --Type-size-h1Mobile: 34px;
  --Type-size-caption: 11px;
  --Type-size-mono: 12px;
  --Type-size-body: 15px;
  --Type-size-h3: 20px;
  --Type-size-h2: 32px;
  --Type-size-h1: 54px;
  --Type-font-mono: "Geist Mono";
  --Type-font-sans: "Noto Sans SC";

  --Radius-radius-pill: 99px;
  --Radius-radius-section: 28px;
  --Radius-radius-panel: 24px;
  --Radius-radius-card: 14px;
  --Radius-radius-tag: 6px;
}

[data-theme="Light"] {
  --Color-semantic-error: #BE123CFF;
  --Color-semantic-warning: #B45309FF;
  --Color-semantic-success: #059669FF;
  --Color-text-muted: #0A0A148C;
  --Color-text-secondary: #0A0A14AD;
  --Color-text-primary: #0A0A14FF;
  --Color-brand-onPrimary: #FFFFFFFF;
  --Color-brand-aurora: #D8EEFFFF;
  --Color-brand-primaryHover: #095E6EFF;
  --Color-glass-stroke: #0A0A141F;
  --Color-glass-fill: #FFFFFFB8;
  --Color-bg-surface: #FFFFFFFF;
  --Color-brand-primary: #0C798DFF;
  --Color-bg-base: #F5F7FBFF;
}

:root {
  --glass-bg: var(--Color-glass-fill);
  --glass-border: 1px solid var(--Color-glass-stroke);
  --glass-blur: var(--Elevation-blur-glass);
  --glass-radius: var(--Radius-radius-section);
  --glass-shadow: 0 16px var(--Elevation-shadow-drop) rgba(0, 0, 0, 0.35);
  --glass-highlight: inset 0 1px 2px rgba(255, 255, 255, 0.25);

  --btn-primary-bg: var(--Color-brand-primary);
  --btn-primary-text: var(--Color-brand-onPrimary);
  --btn-primary-hover: var(--Color-brand-primaryHover);
  --btn-radius: var(--Radius-radius-pill);
  --btn-glow: 0 4px var(--Elevation-shadow-glow) rgba(34, 211, 238, 0.4);

  --focus-ring: 2px solid var(--Color-brand-primary);
  --gutter: var(--Spacing-gutter-desktop);
}

[data-theme="Light"] {
  --glass-shadow: 0 16px var(--Elevation-shadow-drop) rgba(10, 10, 20, 0.09);
  --glass-highlight: inset 0 1px 2px rgba(255, 255, 255, 0.9);
  --btn-glow: 0 4px var(--Elevation-shadow-glow) rgba(12, 121, 141, 0.28);
}

@media (max-width: 639px) {
  :root { --gutter: var(--Spacing-gutter-mobile); }
}