:root {
  color-scheme: light;

  /* Brand + semantic colors */
  --color-brand-primary: #2563eb;
  --color-brand-primary-strong: #1e40af;
  --color-brand-secondary: #0f766e;
  --color-accent-indigo: #4f46e5;
  --color-accent-teal: #0891b2;
  --color-accent-amber: #b45309;

  --color-neutral-0: #ffffff;
  --color-neutral-50: #f7f9fd;
  --color-neutral-100: #eef3fb;
  --color-neutral-200: #d6e0ef;
  --color-neutral-700: #4f5f75;
  --color-neutral-900: #1f2937;

  --color-surface-base: var(--color-neutral-0);
  --color-surface-tint: #f3f7ff;
  --color-surface-tint-teal: #eefaf8;
  --color-surface-tint-indigo: #f3f2ff;
  --color-surface-emphasis: #eaf0fb;
  --color-border-default: var(--color-neutral-200);
  --color-border-accent: rgba(37, 99, 235, 0.34);
  --color-text-primary: var(--color-neutral-900);
  --color-text-muted: var(--color-neutral-700);
  --color-section-alt: #f3f7ff;
  --color-section-alt-2: #f1f7f7;
  --color-cta-primary: linear-gradient(135deg, #2c66e7 0%, #2351bf 100%);
  --color-cta-primary-hover: linear-gradient(135deg, #2f70fb 0%, #2348ac 100%);
  --color-cta-secondary-bg: #ffffff;
  --color-cta-secondary-border: #b8c7df;
  --color-cta-secondary-hover: #edf2ff;
  --color-card-hover: #fbfdff;

  /* Legacy aliases */
  --ds-color-bg: var(--color-neutral-50);
  --ds-color-surface: var(--color-surface-base);
  --ds-color-surface-muted: var(--color-surface-emphasis);
  --ds-color-text: var(--color-text-primary);
  --ds-color-text-muted: var(--color-text-muted);
  --ds-color-border: var(--color-border-default);
  --ds-color-primary: var(--color-brand-primary);
  --ds-color-primary-hover: var(--color-brand-primary-strong);
  --ds-color-secondary: #0f172a;
  --ds-color-success: var(--color-brand-secondary);
  --ds-color-warning: var(--color-accent-amber);

  /* Typography */
  --ds-font-sans: "Inter", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --ds-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --ds-font-size-xs: 12px;
  --ds-font-size-sm: 14px;
  --ds-font-size-md: 16px;
  --ds-font-size-lg: 20px;
  --ds-font-size-xl: 28px;
  --ds-line-height-tight: 1.2;
  --ds-line-height-normal: 1.55;

  /* Spacing */
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-8: 32px;
  --ds-space-10: 40px;
  --ds-space-12: 48px;
  --ds-space-16: 64px;

  /* Radius */
  --ds-radius-sm: 6px;
  --ds-radius-md: 10px;
  --ds-radius-lg: 14px;
  --ds-radius-pill: 999px;

  /* Shadow */
  --ds-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.08);
  --ds-shadow-md: 0 10px 24px rgba(15, 23, 42, 0.12);
  --ds-shadow-lg: 0 20px 42px rgba(15, 23, 42, 0.14);

  /* Layout */
  --ds-container-max: 1180px;
  --ds-content-max: 920px;
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-brand-primary: #60a5fa;
  --color-brand-primary-strong: #3b82f6;
  --color-brand-secondary: #2dd4bf;
  --color-accent-indigo: #818cf8;
  --color-accent-teal: #22d3ee;
  --color-accent-amber: #f59e0b;
  --color-neutral-0: #101a2f;
  --color-neutral-50: #0b1220;
  --color-neutral-100: #0f1a2f;
  --color-neutral-200: #243149;
  --color-neutral-700: #a7b2c4;
  --color-neutral-900: #e5ecf7;
  --color-surface-base: #101a2f;
  --color-surface-tint: #12233f;
  --color-surface-tint-teal: #102a2a;
  --color-surface-tint-indigo: #1b2045;
  --color-surface-emphasis: #0d1729;
  --color-border-default: #243149;
  --color-border-accent: rgba(96, 165, 250, 0.45);
  --color-text-primary: #e5ecf7;
  --color-text-muted: #a7b2c4;
  --color-section-alt: #0f1c34;
  --color-section-alt-2: #0f2428;
  --color-cta-primary: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%);
  --color-cta-primary-hover: linear-gradient(135deg, #7cb7ff 0%, #3b82f6 100%);
  --color-cta-secondary-bg: #101a2f;
  --color-cta-secondary-border: #2f4061;
  --color-cta-secondary-hover: #152543;

  --ds-color-bg: var(--color-neutral-50);
  --ds-color-surface: var(--color-surface-base);
  --ds-color-surface-muted: var(--color-surface-emphasis);
  --ds-color-text: var(--color-text-primary);
  --ds-color-text-muted: var(--color-text-muted);
  --ds-color-border: var(--color-border-default);
  --ds-color-primary: var(--color-brand-primary);
  --ds-color-primary-hover: var(--color-brand-primary-strong);
  --ds-color-secondary: #e2e8f0;
  --ds-color-success: var(--color-brand-secondary);
  --ds-color-warning: var(--color-accent-amber);
  --ds-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --ds-shadow-md: 0 10px 24px rgba(0, 0, 0, 0.4);
  --ds-shadow-lg: 0 20px 42px rgba(0, 0, 0, 0.48);
}