/* ==========================================================================
   CodeVerse — Design Tokens
   Single source of truth for color, type, spacing, radius, shadow.
   Every other CSS file consumes these variables — never hardcode values.
   ========================================================================== */

:root {
  /* ---- Color: light theme (default) ---- */
  --color-bg: #FAFAF9;
  --color-bg-raised: #FFFFFF;
  --color-bg-sunken: #F1F0ED;
  --color-border: #E4E2DD;
  --color-border-strong: #D2CFC7;

  --color-text: #14171F;
  --color-text-muted: #5B5F6B;
  --color-text-faint: #8A8D96;

  --color-accent: #5B5FEF;       /* indigo-violet — primary brand */
  --color-accent-hover: #4A4EDB;
  --color-accent-soft: #EDEDFC;
  --color-accent-text: #FFFFFF;

  --color-success: #1E9E6B;      /* muted terminal-green, used sparingly */
  --color-success-soft: #E5F6EE;
  --color-warning: #B7791F;
  --color-warning-soft: #FBF0DD;
  --color-danger: #C0392B;
  --color-danger-soft: #FBEAE7;

  --color-code-bg: #14171F;
  --color-code-text: #E4E2DD;
  --color-code-accent: #7C82F5;

  /* ---- Typography ---- */
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --text-5xl: 3.75rem;

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --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;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* ---- Shadow ---- */
  --shadow-sm: 0 1px 2px rgba(20, 23, 31, 0.05);
  --shadow-md: 0 4px 16px rgba(20, 23, 31, 0.08);
  --shadow-lg: 0 12px 32px rgba(20, 23, 31, 0.10);
  --shadow-focus: 0 0 0 3px rgba(91, 95, 239, 0.35);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 220ms;
  --duration-slow: 420ms;

  /* ---- Layout ---- */
  --container-max: 1160px;
  --sidebar-width: 280px;
  --header-height: 68px;
}

/* ---- Color: dark theme ---- */
[data-theme="dark"] {
  --color-bg: #0B0E14;
  --color-bg-raised: #131722;
  --color-bg-sunken: #080A0F;
  --color-border: #232838;
  --color-border-strong: #323A4F;

  --color-text: #EDEEF2;
  --color-text-muted: #A6ACBC;
  --color-text-faint: #6E7386;

  --color-accent: #7C82F5;
  --color-accent-hover: #9297F7;
  --color-accent-soft: #1B1D3A;
  --color-accent-text: #0B0E14;

  --color-success: #3FCB8E;
  --color-success-soft: #103627;
  --color-warning: #E0A83E;
  --color-warning-soft: #3A2C10;
  --color-danger: #E36657;
  --color-danger-soft: #3A1712;

  --color-code-bg: #080A0F;
  --color-code-text: #D7D9E0;
  --color-code-accent: #9297F7;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
}

/* Respect reduced-motion preference globally */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}