/* ==========================================================================
   variables.css — Design tokens
   Single source of truth for color, spacing, type, radius, motion.
   Theme model (kept deliberately simple):
     :root                         → light defaults
     :root[data-theme="dark"]      → explicit dark (set by themeManager)
     @media prefers-color-scheme   → dark when the user has no explicit choice
   Everything else in the app consumes the *semantic* tokens, never raw hex.
   ========================================================================== */

:root {
  /* ---- Color: surfaces & text (light) ---- */
  --color-bg: #ffffff;
  --color-bg-elevated: #f6f8fa;
  --color-bg-inset: #eef1f4;
  --color-text: #1f2328;
  --color-text-muted: #59636e;
  --color-border: #d1d9e0;
  --color-border-strong: #b7c0c9;

  /* ---- Color: brand / interactive ---- */
  --color-accent: #6e5cf6;
  --color-accent-hover: #5b47e6;
  --color-accent-contrast: #ffffff;
  --color-accent-soft: rgba(110, 92, 246, 0.12);

  /* ---- Color: feedback ---- */
  --color-success: #1a7f37;

  /* ---- Focus ---- */
  --focus-ring: 0 0 0 3px var(--color-accent-soft);
  --focus-outline: 2px solid var(--color-accent);

  /* ---- Typography ---- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;

  --leading-tight: 1.25;
  --leading-normal: 1.6;

  /* ---- Spacing scale (4px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

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

  /* ---- Elevation (kept subtle) ---- */
  --shadow-sm: 0 1px 2px rgba(31, 35, 40, 0.06);
  --shadow-md: 0 4px 12px rgba(31, 35, 40, 0.1);

  /* ---- Motion (minimal) ---- */
  --transition-fast: 120ms ease;
  --transition: 160ms ease;

  /* ---- Layout ---- */
  --header-height: 3.5rem;
  --workspace-gap: 0px; /* panels meet at a divider, no gap */
  --editor-max: 46rem;
}

/* ---- Explicit dark theme (user toggled) ---- */
:root[data-theme="dark"] {
  --color-bg: #0d1117;
  --color-bg-elevated: #161b22;
  --color-bg-inset: #010409;
  --color-text: #e6edf3;
  --color-text-muted: #8b949e;
  --color-border: #30363d;
  --color-border-strong: #444c56;

  --color-accent: #8b7dff;
  --color-accent-hover: #a99bff;
  --color-accent-contrast: #0d1117;
  --color-accent-soft: rgba(139, 125, 255, 0.18);

  --color-success: #3fb950;

  --shadow-sm: 0 1px 2px rgba(1, 4, 9, 0.4);
  --shadow-md: 0 4px 12px rgba(1, 4, 9, 0.5);
}

/* ---- System dark, only when the user hasn't chosen explicitly ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #0d1117;
    --color-bg-elevated: #161b22;
    --color-bg-inset: #010409;
    --color-text: #e6edf3;
    --color-text-muted: #8b949e;
    --color-border: #30363d;
    --color-border-strong: #444c56;

    --color-accent: #8b7dff;
    --color-accent-hover: #a99bff;
    --color-accent-contrast: #0d1117;
    --color-accent-soft: rgba(139, 125, 255, 0.18);

    --color-success: #3fb950;

    --shadow-sm: 0 1px 2px rgba(1, 4, 9, 0.4);
    --shadow-md: 0 4px 12px rgba(1, 4, 9, 0.5);
  }
}