:root {
  /* Neutral ramp (cool slate) */
  --bg: #ffffff;
  --bg-alt: #f3f7fb;
  --bg-elev: #f7fafd;
  --card-bg: #f7fafd;
  --fg: #0f172a;
  --fg-muted: #5a6270;
  --fg-subtle: #8a93a2;
  --border: #dde3ea;
  --border-strong: #c3ccd6;

  /* Primary (sky blue) */
  --accent: #0284c7;
  --accent-2: #0ea5e9;
  --accent-fg: #ffffff;
  --accent-soft: color-mix(in srgb, var(--accent) 12%, var(--bg));

  /* Secondary ramp */
  --secondary: #475569;
  --secondary-2: #64748b;

  /* Semantic */
  --success: #16a34a;
  --success-soft: color-mix(in srgb, var(--success) 12%, var(--bg));
  --warning: #d97706;
  --warning-soft: color-mix(in srgb, var(--warning) 12%, var(--bg));
  --danger: #dc2626;
  --danger-soft: color-mix(in srgb, var(--danger) 12%, var(--bg));

  /* Radius */
  --radius: 14px;
  --radius-sm: 8px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.12);
  --shadow-glow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 12px 36px color-mix(in srgb, var(--accent) 22%, transparent);

  /* Typography */
  --font-heading: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

[data-theme='dark'] {
  --bg: #0a0a0c;
  --bg-alt: #101013;
  --bg-elev: #161619;
  --card-bg: #131316;
  --fg: #f4f1ea;
  --fg-muted: #a39c8e;
  --fg-subtle: #6c665b;
  --border: #26262b;
  --border-strong: #36363d;

  --accent: #e0b13a;
  --accent-2: #f2cb63;
  --accent-fg: #1a1204;
  --accent-soft: color-mix(in srgb, var(--accent) 14%, var(--bg));

  --secondary: #b8b0a0;
  --secondary-2: #928a7a;

  --success: #5bd989;
  --success-soft: color-mix(in srgb, var(--success) 14%, var(--bg));
  --warning: #f0b450;
  --warning-soft: color-mix(in srgb, var(--warning) 14%, var(--bg));
  --danger: #ff6b6b;
  --danger-soft: color-mix(in srgb, var(--danger) 14%, var(--bg));

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent), 0 14px 40px color-mix(in srgb, var(--accent) 20%, transparent);
}