:root,
[data-theme='light'] {
  --color-bg: #FAFCFC;
  --color-surface: #ffffff;
  --color-surface-2: #edfdfd;
  --color-surface-3: #e6fffa;
  --color-border: #E0EBEB;
  --color-border-strong: #cbd5e0;
  --color-border-focus: #4fd1c5;
  --color-text: #0F1F2E;
  --color-text-secondary: #0F1F2E;
  --color-text-tertiary: #718096;
  --color-primary: #5CCFC4;
  --color-brand: #4fd1c5;
  --color-brand-hover: #38b2ac;
  --color-brand-soft: #e6fffa;
  --color-brand-soft-2: #b2f5ea;
  --color-success: #38a169;
  --color-success-soft: #f0fff4;
  --color-warning: #d69e2e;
  --color-warning-soft: #fffff0;
  --color-danger: #e53e3e;
  --color-danger-soft: #fff5f5;
  --color-info: #3182ce;
  --color-info-soft: #ebf8ff;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-focus: 0 0 0 3px rgba(79, 209, 197, 0.2);
  --gradient-brand: linear-gradient(135deg, #4fd1c5 0%, #38b2ac 100%);
  --gradient-hero: radial-gradient(900px 420px at 4% 0%, rgba(79, 209, 197, 0.15), transparent 60%),
    radial-gradient(760px 420px at 100% 8%, rgba(56, 178, 172, 0.1), transparent 50%),
    linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
}

[data-theme='dark'] {
  --color-bg: #0f172a;
  --color-surface: #1e293b;
  --color-surface-2: #1e293b;
  --color-surface-3: #334155;
  --color-border: #334155;
  --color-border-strong: #475569;
  --color-border-focus: #4fd1c5;
  --color-text: #f8fafc;
  --color-text-secondary: #94a3b8;
  --color-text-tertiary: #64748b;
  --color-brand: #4fd1c5;
  --color-brand-hover: #38b2ac;
  --color-brand-soft: #134e4a;
  --color-brand-soft-2: #115e59;
  --color-info: #60a5fa;
  --color-info-soft: #1e3a8a;
  --gradient-brand: linear-gradient(135deg, #4fd1c5 0%, #38b2ac 100%);
  --gradient-hero: radial-gradient(900px 420px at 4% 0%, rgba(79, 209, 197, 0.18), transparent 62%),
    radial-gradient(760px 420px at 100% 8%, rgba(56, 178, 172, 0.16), transparent 58%),
    linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
}