/* ViewBox design tokens. Semantic only — see /DESIGN.md §5. Never use raw values in feature CSS. */

:root {
  /* ---- Light theme (default) ---- */
  --background-primary: #fafafa;
  --background-secondary: #f4f4f5;
  --background-tertiary: #ececee;
  --background-elevated: #ffffff;
  --background-canvas: #e4e4e7;

  --surface-default: #ffffff;
  --surface-hover: #f4f4f5;
  --surface-active: #ececee;
  --surface-selected: #e4e4e7;
  --surface-disabled: #f4f4f5;

  --border-subtle: #ececee;
  --border-default: #e0e0e4;
  --border-strong: #c4c4cc;
  --border-focus: #09090b;

  --text-primary: #09090b;
  --text-secondary: #52525b;
  --text-tertiary: #71717a;
  --text-disabled: #a1a1aa;
  --text-inverse: #fafafa;

  --brand-primary: #09090b;
  --brand-primary-hover: #27272a;
  --brand-primary-active: #3f3f46;
  --brand-on-primary: #fafafa;

  --status-success: #15803d;
  --status-warning: #b45309;
  --status-error: #dc2626;
  --status-info: #1d4ed8;
  --status-success-bg: rgba(21, 128, 61, 0.1);
  --status-warning-bg: rgba(180, 83, 9, 0.1);
  --status-error-bg: rgba(220, 38, 38, 0.1);
  --status-info-bg: rgba(29, 78, 216, 0.1);

  --overlay: rgba(9, 9, 11, 0.45);
  --shadow-color: 9, 9, 11;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background-primary: #0a0a0b;
    --background-secondary: #101012;
    --background-tertiary: #17171a;
    --background-elevated: #1c1c20;
    --background-canvas: #050506;

    --surface-default: #131316;
    --surface-hover: #1c1c20;
    --surface-active: #26262b;
    --surface-selected: #2a2a30;
    --surface-disabled: #131316;

    --border-subtle: #1e1e22;
    --border-default: #2a2a30;
    --border-strong: #3f3f46;
    --border-focus: #fafafa;

    --text-primary: #fafafa;
    --text-secondary: #c4c4cc;
    --text-tertiary: #8e8e99;
    --text-disabled: #52525b;
    --text-inverse: #09090b;

    --brand-primary: #fafafa;
    --brand-primary-hover: #e4e4e7;
    --brand-primary-active: #d4d4d8;
    --brand-on-primary: #09090b;

    --status-success: #22c55e;
    --status-warning: #f59e0b;
    --status-error: #ef4444;
    --status-info: #60a5fa;
    --status-success-bg: rgba(34, 197, 94, 0.14);
    --status-warning-bg: rgba(245, 158, 11, 0.14);
    --status-error-bg: rgba(239, 68, 68, 0.14);
    --status-info-bg: rgba(96, 165, 250, 0.14);

    --overlay: rgba(0, 0, 0, 0.6);
    --shadow-color: 0, 0, 0;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --background-primary: #0a0a0b;
  --background-secondary: #101012;
  --background-tertiary: #17171a;
  --background-elevated: #1c1c20;
  --background-canvas: #050506;

  --surface-default: #131316;
  --surface-hover: #1c1c20;
  --surface-active: #26262b;
  --surface-selected: #2a2a30;
  --surface-disabled: #131316;

  --border-subtle: #1e1e22;
  --border-default: #2a2a30;
  --border-strong: #3f3f46;
  --border-focus: #fafafa;

  --text-primary: #fafafa;
  --text-secondary: #c4c4cc;
  --text-tertiary: #8e8e99;
  --text-disabled: #52525b;
  --text-inverse: #09090b;

  --brand-primary: #fafafa;
  --brand-primary-hover: #e4e4e7;
  --brand-primary-active: #d4d4d8;
  --brand-on-primary: #09090b;

  --status-success: #22c55e;
  --status-warning: #f59e0b;
  --status-error: #ef4444;
  --status-info: #60a5fa;
  --status-success-bg: rgba(34, 197, 94, 0.14);
  --status-warning-bg: rgba(245, 158, 11, 0.14);
  --status-error-bg: rgba(239, 68, 68, 0.14);
  --status-info-bg: rgba(96, 165, 250, 0.14);

  --overlay: rgba(0, 0, 0, 0.6);
  --shadow-color: 0, 0, 0;
  color-scheme: dark;
}

/* ---- Theme-independent tokens ---- */
:root {
  /* Typography: one typeface, strict scale */
  --font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --text-display: 650 28px/34px var(--font-family);
  --text-h1: 650 22px/28px var(--font-family);
  --text-h2: 600 18px/24px var(--font-family);
  --text-h3: 600 15px/20px var(--font-family);
  --text-body-lg: 400 15px/22px var(--font-family);
  --text-body: 400 13px/20px var(--font-family);
  --text-body-sm: 400 12px/16px var(--font-family);
  --text-label: 500 12px/16px var(--font-family);
  --text-caption: 400 11px/16px var(--font-family);
  --text-micro: 600 10px/12px var(--font-family);
  --ls-display: -0.02em;
  --ls-h1: -0.015em;
  --ls-tight: -0.01em;
  --ls-normal: 0;
  --ls-label: 0.01em;
  --ls-micro: 0.06em;

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

  /* Radius */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-full: 999px;

  /* Elevation */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(var(--shadow-color), 0.12);
  --shadow-md: 0 4px 12px rgba(var(--shadow-color), 0.16);
  --shadow-lg: 0 12px 32px rgba(var(--shadow-color), 0.28);

  /* Motion */
  --duration-fast: 120ms;
  --duration-normal: 180ms;
  --duration-slow: 240ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* Sizing */
  --control-sm: 28px;
  --control-md: 32px;
  --control-lg: 40px;
  --icon-size: 16px;

  /* Layering */
  --z-dropdown: 20;
  --z-tooltip: 40;
  --z-dialog: 50;
  --z-toast: 60;

  font: var(--text-body);
  font-family: var(--font-family);
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 1ms; --duration-normal: 1ms; --duration-slow: 1ms; }
}