/* ============================================================================
   RewriteAI - Design Tokens (spec 36)
   Single source of truth for colors, radius, typography, shadows, motion.
   No component may hardcode a color - always use a var() from this file.
   Theme: dark (default) / light / system - set via <html data-theme="...">.
   ========================================================================== */

:root {
  /* ---- Typography -------------------------------------------------------- */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", 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;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 2.75rem;

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.6;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- Radius ------------------------------------------------------------ */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* ---- Spacing / layout --------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --container-max: 72rem;
  --container-wide: 80rem;
  --header-height: 4.25rem;
  --sidebar-width: 16rem;

  /* ---- Motion ------------------------------------------------------------ */
  --transition-fast: 120ms ease;
  --transition: 180ms ease;
  --transition-slow: 280ms ease;
}

/* ============================ DARK (default) ============================== */
:root,
:root[data-theme="dark"] {
  --background: #0a0e16;
  --background-elevated: #0d121c;
  --foreground: #e7ecf4;
  --muted: #131a27;
  --muted-foreground: #94a3b8;
  --card: #101725;
  --card-hover: #141d2e;
  --border: rgba(148, 163, 184, 0.16);
  --border-strong: rgba(148, 163, 184, 0.3);

  --primary: #4f7cff;
  --primary-hover: #3d68f0;
  --primary-strong: #3057e6;
  --primary-on-soft: #6b95ff;
  --text-disabled: #7d889b;
  --primary-soft: rgba(79, 124, 255, 0.14);
  --primary-foreground: #ffffff;

  --accent: #8b5cf6;
  --accent-soft: rgba(139, 92, 246, 0.14);
  --accent-on-soft: #a78bfa;

  --success: #22c55e;
  --success-soft: rgba(34, 197, 94, 0.14);
  --success-on-soft: #22c55e;
  --warning: #f59e0b;
  --warning-soft: rgba(245, 158, 11, 0.14);
  --warning-on-soft: #f59e0b;
  --danger: #ef4444;
  --danger-soft: rgba(239, 68, 68, 0.14);
  --danger-on-soft: #f87171;
  --info: #38bdf8;
  --info-soft: rgba(56, 189, 248, 0.14);

  --focus-ring: 0 0 0 2px var(--background), 0 0 0 4px var(--primary);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);

  --code-bg: #0b111d;
  --overlay: rgba(4, 7, 13, 0.7);
  color-scheme: dark;
}

/* ================================ LIGHT ================================== */
:root[data-theme="light"] {
  --background: #f7f8fb;
  --background-elevated: #ffffff;
  --foreground: #101728;
  --muted: #eef1f7;
  --muted-foreground: #5b6779;
  --card: #ffffff;
  --card-hover: #f4f6fb;
  --border: rgba(16, 23, 40, 0.12);
  --border-strong: rgba(16, 23, 40, 0.24);

  --primary: #3d63e8;
  --primary-hover: #2f52d4;
  --primary-strong: #2746b5;
  --primary-on-soft: #2746b5;
  --text-disabled: #5b6779;
  --primary-soft: rgba(61, 99, 232, 0.1);
  --primary-foreground: #ffffff;

  --accent: #7c3aed;
  --accent-soft: rgba(124, 58, 237, 0.1);
  --accent-on-soft: #7c3aed;

  --success: #16a34a;
  --success-soft: rgba(22, 163, 74, 0.1);
  --success-on-soft: #166534;
  --warning: #d97706;
  --warning-soft: rgba(217, 119, 6, 0.1);
  --warning-on-soft: #92400e;
  --danger: #dc2626;
  --danger-soft: rgba(220, 38, 38, 0.1);
  --danger-on-soft: #b91c1c;
  --info: #0284c7;
  --info-soft: rgba(2, 132, 199, 0.1);

  --focus-ring: 0 0 0 2px var(--background), 0 0 0 4px var(--primary);
  --shadow-sm: 0 1px 2px rgba(16, 23, 40, 0.06);
  --shadow-md: 0 8px 24px rgba(16, 23, 40, 0.1);
  --shadow-lg: 0 24px 60px rgba(16, 23, 40, 0.16);

  --code-bg: #f2f4f9;
  --overlay: rgba(16, 23, 40, 0.45);
  color-scheme: light;
}

/* ============================== SYSTEM =================================== */
@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
    --background: #f7f8fb;
    --background-elevated: #ffffff;
    --foreground: #101728;
    --muted: #eef1f7;
    --muted-foreground: #5b6779;
    --card: #ffffff;
    --card-hover: #f4f6fb;
    --border: rgba(16, 23, 40, 0.12);
    --border-strong: rgba(16, 23, 40, 0.24);
    --primary: #3d63e8;
    --primary-hover: #2f52d4;
    --primary-strong: #2746b5;
    --primary-on-soft: #2746b5;
    --text-disabled: #5b6779;
    --primary-soft: rgba(61, 99, 232, 0.1);
    --accent: #7c3aed;
    --accent-soft: rgba(124, 58, 237, 0.1);
    --accent-on-soft: #7c3aed;
    --success: #16a34a;
    --success-soft: rgba(22, 163, 74, 0.1);
    --success-on-soft: #166534;
    --warning: #d97706;
    --warning-soft: rgba(217, 119, 6, 0.1);
    --warning-on-soft: #92400e;
    --danger: #dc2626;
    --danger-soft: rgba(220, 38, 38, 0.1);
    --danger-on-soft: #b91c1c;
    --info: #0284c7;
    --info-soft: rgba(2, 132, 199, 0.1);
    --shadow-sm: 0 1px 2px rgba(16, 23, 40, 0.06);
    --shadow-md: 0 8px 24px rgba(16, 23, 40, 0.1);
    --shadow-lg: 0 24px 60px rgba(16, 23, 40, 0.16);
    --code-bg: #f2f4f9;
    --overlay: rgba(16, 23, 40, 0.45);
    color-scheme: light;
  }
}

/* ============================ REDUCED MOTION ============================= */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition: 0ms;
    --transition-slow: 0ms;
  }
}