/* Unified Semantic Design Tokens (initial draft) */
:root {
  /* Backgrounds */
  --color-bg-base: #14161a; /* dark base */
  --color-bg-surface: #1e2127;
  --color-bg-alt: #242b33; /* panel gradient anchor */
  --color-bg-inset: #2c2c2c; /* legacy compat */
  --color-bg-light: #f8f9fa; /* marketing light sections */

  /* Foreground */
  --color-fg-primary: #f5f7fa;
  --color-fg-secondary: #b2b8c2;
  --color-fg-inverse: #14161a;
  --color-fg-muted: #8a9098; /* new intermediate */
  --color-fg-disabled: #5a6169;

  /* Accent / Brand */
  --color-accent: #3d7eff;
  --color-accent-alt: #6aa4ff;
  --color-brand-primary: #8b5cf6;
  --color-brand-secondary: #3b82f6;
  --color-brand-soft: #a78bfa;
  --color-brand-text: #e0d4ff;
  --color-border: #2b3036;
  --color-accent-contrast: #e4efff; /* text/icon on accent backgrounds */
  --gradient-page: radial-gradient(circle at 25% 15%, var(--color-bg-alt), var(--color-bg-base) 60%);
  --gradient-shell-panel: linear-gradient(145deg, #1e2530, #161a20 60%);
  --gradient-brand: linear-gradient(135deg, var(--color-brand-soft), var(--color-brand-secondary));
  --gradient-brand-input: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(59, 130, 246, 0.06));
  --gradient-brand-input-focus: linear-gradient(135deg, rgba(139, 92, 246, 0.14), rgba(59, 130, 246, 0.10));
  --gradient-nova-sidebar: linear-gradient(180deg, #0e0c18 0%, #12101e 100%);
  --gradient-nova-main: linear-gradient(160deg, #110f1c 0%, #0c0e18 30%, #0f1120 100%);

  /* Focus & outlines */
  --color-focus-ring: 61 126 255; /* raw RGB */

  /* Shadows */
  --shadow-sm: 0 1px 2px -1px rgba(0 0 0 / .4), 0 1px 1px rgba(0 0 0 / .25);
  --shadow-md: 0 4px 10px -2px rgba(0 0 0 / .55);
  --shadow-focus: 0 0 0 2px rgba(var(--color-focus-ring)/.55);

  /* Status */
  --color-danger: #ef476f;
  --color-warning: #ffd166;
  --color-success: #06d6a0;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  /* Spacing (4pt base scale) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  /* Motion */
  --ease-standard: cubic-bezier(.4,0,.2,1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
}

html[data-theme='light'] {
  --color-bg-base: #f2f6fb;
  --color-bg-surface: #ffffff;
  --color-bg-alt: #eef2f5;
  --color-bg-inset: #dde3ea;
  --color-fg-primary: #1e252c;
  --color-fg-secondary: #5a6672;
  --color-fg-inverse: #ffffff;
  --color-border: #d2d9e1;
  --color-fg-muted: #7b8793;
  --color-fg-disabled: #a8b2bc;
  --color-accent-contrast: #102342;
  --color-brand-primary: #7c3aed;
  --color-brand-secondary: #2563eb;
  --color-brand-soft: #8b5cf6;
  --color-brand-text: #4c1d95;
  --gradient-page: radial-gradient(circle at 25% 15%, var(--color-bg-base), var(--color-bg-alt) 60%);
  --gradient-shell-panel: linear-gradient(145deg, var(--color-bg-surface), var(--color-bg-alt) 60%);
  --gradient-brand: linear-gradient(135deg, var(--color-brand-soft), var(--color-brand-secondary));
  --gradient-brand-input: linear-gradient(135deg, rgba(139, 92, 246, 0.05), rgba(59, 130, 246, 0.03));
  --gradient-brand-input-focus: linear-gradient(135deg, rgba(139, 92, 246, 0.10), rgba(59, 130, 246, 0.06));
  --gradient-nova-sidebar: linear-gradient(180deg, #f8f5ff 0%, #eef1ff 100%);
  --gradient-nova-main: linear-gradient(160deg, #f8f5ff 0%, #f0edfa 40%, #eef1ff 100%);
}

/* Auto theme (respect user preference unless explicitly overridden by data-theme attr) */
@media (prefers-color-scheme: light) {
  html:not([data-theme='dark']):not([data-theme='light']) {
    color-scheme: light;
  }
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme='dark']):not([data-theme='light']) {
    color-scheme: dark;
  }
}

/* Accessibility utility tokens */
:root {
  --contrast-min-body: 4.5; /* documentation only; not machine-enforced */
}