/* 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-border: #2b3036;
  --color-accent-contrast: #e4efff; /* text/icon on accent backgrounds */

  /* 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;
}

/* 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 */
}