:root {
  color-scheme: dark light;
  accent-color: var(--accent);

  /* Brand */
  --accent: #06b6d4;
  --accent-2: #3b82f6;
  --accent-3: #7c3aed;
  --accent-gradient: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 50%, var(--accent-3) 100%);
  --ma-cyan: var(--accent);
  --ma-blue: var(--accent-2);
  --ma-indigo: #6366f1;
  --ma-purple: var(--accent-3);
  --ma-grad: var(--accent-gradient);
  --ma-grad-h: linear-gradient(135deg, #22d3ee, #60a5fa, #a78bfa);

  /* Surfaces */
  --bg-main: #0b141a;
  --bg-sidebar: #111b21;
  --bg-panel: rgba(20, 29, 39, 0.92);
  --bg-chat: #0b141a;
  --bg-card: #202c33;
  --bg-input: #111b2a;
  --surface: #111827;
  --surface-2: #17212b;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);

  /* Text */
  --text: #edf2f7;
  --muted: #aab7c6;       /* raised from #94a3b8 for WCAG AA on dark surfaces */
  --muted-2: #8493a6;     /* raised from #6b7890 */

  /* Semantic state */
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #3b82f6;
  --green: var(--success);
  --yellow: #facc15;
  --red: var(--error);
  --cyan: var(--accent);
  --cyan-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --cyan-dim: color-mix(in srgb, var(--accent) 15%, transparent);
  --cyan-border: color-mix(in srgb, var(--accent) 32%, transparent);
  --blue: var(--accent-2);
  --warn: var(--warning);
  --danger: var(--error);
  --success-soft: color-mix(in srgb, var(--success) 13%, transparent);
  --warn-soft: color-mix(in srgb, var(--warning) 13%, transparent);
  --danger-soft: color-mix(in srgb, var(--error) 13%, transparent);

  /* Chat */
  --bubble-user: #005c4b;
  --bubble-bot: var(--bg-card);
  --bubble-human: #1f3c88;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 64px;
  --space-12: 96px;

  /* Type */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Type scale */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: clamp(22px, 2vw, 24px);
  --text-2xl: clamp(26px, 3vw, 32px);
  --text-3xl: clamp(32px, 5vw, 48px);

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.18);
  --shadow-md: 0 14px 36px rgba(0, 0, 0, 0.22);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.28);
  --shadow-glow: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent), 0 16px 40px color-mix(in srgb, var(--accent) 18%, transparent);
  --shadow: var(--shadow-md);

  /* Motion */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 350ms ease;

  /* Skeletons */
  --skeleton-base: rgba(148, 163, 184, 0.16);
  --skeleton-sheen: rgba(255, 255, 255, 0.24);

  /* Landing aliases */
  --lp-dark: #06080f;
  --lp-card: #0d1117;
  --lp-card2: #111827;
  --lp-border: #1e2535;
  --lp-muted: #8b95a8;
  --lp-text: #e8ecf0;

  /* Calendar aliases */
  --s0: #080c14;
  --s1: #0d1220;
  --s2: #111828;
  --s3: #161e2e;
  --border2: rgba(255, 255, 255, 0.1);
  --muted2: #8b95a8;
  --green-b: rgba(34, 197, 94, 0.45);
  --green-t: #4ade80;
  --orange: rgba(249, 115, 22, 0.15);
  --orange-b: rgba(249, 115, 22, 0.4);
  --orange-t: #fb923c;
  --purple: rgba(139, 92, 246, 0.18);
  --purple-b: rgba(139, 92, 246, 0.4);
  --purple-t: #a78bfa;
  --red-b: rgba(239, 68, 68, 0.35);
  --red-t: #f87171;

  /* Onboarding aliases */
  --ob-bg: var(--bg-main);
  --ob-nav: var(--bg-sidebar);
  --ob-card: var(--bg-sidebar);
  --ob-surface: #1a272e;
  --ob-surface-2: #1f2f38;
  --ob-surface-3: #202c33;
  --ob-surface-4: #0d1117;
  --ob-border: #2a373e;
  --ob-border-soft: rgba(255, 255, 255, 0.06);
  --ob-text: #e9edef;
  --ob-muted: #8696a0;
  --ob-muted-2: #6b7a8d;
  --ob-shadow: var(--shadow-lg);
  --ob-tip-bg: color-mix(in srgb, var(--accent) 6%, transparent);
  --ob-tip-border: color-mix(in srgb, var(--accent) 20%, transparent);
  --ob-overlay: rgba(0, 0, 0, 0.82);
  --ob-demo-box: #111b21;
}

html[data-ui-theme="light"] {
  color-scheme: light;
  --accent: #0891b2;
  --accent-2: #2563eb;
  --accent-3: #7c3aed;
  --bg-main: #edf4fb;
  --bg-sidebar: #f6faff;
  --bg-panel: rgba(255, 255, 255, 0.92);
  --bg-card: rgba(255, 255, 255, 0.94);
  --bg-chat: #f2f7fc;
  --bg-input: #eef4fb;
  --surface: #ffffff;
  --surface-2: #eef4fb;
  --border: rgba(148, 163, 184, 0.24);
  --border-strong: rgba(148, 163, 184, 0.34);
  --text: #0f172a;
  --muted: #4b5563;       /* darkened from #64748b for WCAG AA on light surfaces */
  --muted-2: #5b6b80;     /* darkened from #7b8ca5 */
  --bubble-user: linear-gradient(180deg, #d7f8e2 0%, #c8f1d7 100%);
  --bubble-bot: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  --bubble-human: linear-gradient(180deg, #e5edff 0%, #dce7ff 100%);
  --skeleton-base: rgba(148, 163, 184, 0.24);
  --skeleton-sheen: rgba(255, 255, 255, 0.86);
}