/**
 * IMS Phase 1 — semantic design tokens (dark default + light theme).
 * Component styles consume these variables only; values switch via html[data-theme].
 */

:root {
  color-scheme: dark;

  /* Typography */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --leading-tight: 1.2;
  --leading-body: 1.55;
  --tracking-tight: -0.02em;
  --tracking-wide: 0.08em;

  /* Spacing scale (4px base) */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;
  --section-y: clamp(1rem, 2vw, 1.5rem);
  --content-pad-x: clamp(1rem, 2.5vw, 1.75rem);
  --content-pad-y: var(--space-5);

  /* Shape */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-pill: 999px;
  --control-height-sm: 2rem;
  --control-height-md: 2.375rem;
  --control-height-lg: 2.75rem;
  --sidebar-width: 250px;
  --container-max: 1320px;

  /* Shared brand accent (both themes) */
  --accent: #d88624;
  --accent-bright: #e39a3d;
  --accent-deep: #b86812;
  --accent-soft: rgba(216, 134, 36, 0.18);
  --accent-glow: rgba(216, 134, 36, 0.33);
  --accent-glow-soft: rgba(216, 134, 36, 0.11);
  --text-on-accent: #140d06;

  /* Dark theme surfaces */
  --bg: #07070a;
  --bg-elevated: #0c0c12;
  --bg-soft: #12121a;
  --bg-panel: rgba(255, 255, 255, 0.035);
  --bg-panel-2: rgba(255, 255, 255, 0.055);
  --bg-input: #101018;
  --bg-selected: rgba(232, 148, 46, 0.1);
  --bg-hover: rgba(255, 255, 255, 0.045);
  --bg-disabled: rgba(255, 255, 255, 0.04);

  --text: #f4efe6;
  --text-secondary: #c9c2b6;
  --text-muted: #9a9288;
  --text-disabled: #6b6560;

  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --line-soft: rgba(255, 255, 255, 0.05);
  --border-input: rgba(255, 255, 255, 0.12);
  --border-input-focus: rgba(232, 148, 46, 0.55);

  --success: #4ade80;
  --warning: #fbbf24;
  --danger: #f87171;
  --info: #94a3b8;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);

  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px rgba(232, 148, 46, 0.55);
}

html[data-theme="light"] {
  color-scheme: light;

  --bg: #e6e1d9;
  --bg-elevated: #f2ece3;
  --bg-soft: #ddd5ca;
  --bg-panel: #ffffff;
  --bg-panel-2: #ede5da;
  --bg-input: #ffffff;
  --bg-selected: rgba(216, 134, 36, 0.12);
  --bg-hover: rgba(216, 134, 36, 0.075);
  --bg-disabled: rgba(26, 22, 18, 0.075);

  --text: #1a1814;
  --text-secondary: #363027;
  --text-muted: #534b40;
  --text-disabled: #7d7568;

  --line: rgba(26, 22, 18, 0.16);
  --line-strong: rgba(26, 22, 18, 0.24);
  --line-soft: rgba(26, 22, 18, 0.1);
  --border-input: rgba(26, 22, 18, 0.22);
  --border-input-focus: rgba(184, 104, 18, 0.68);

  --success: #15803d;
  --warning: #b45309;
  --danger: #dc2626;
  --info: #475569;

  --shadow-sm: 0 1px 2px rgba(26, 22, 18, 0.06);
  --shadow-md: 0 4px 16px rgba(26, 22, 18, 0.1);
  --shadow-lg: 0 12px 32px rgba(26, 22, 18, 0.12);

  --focus-ring: 0 0 0 2px var(--bg-elevated), 0 0 0 4px rgba(232, 148, 46, 0.65);
}