/* ============================================================
   Visca Sovereign — design tokens
   Dark is the default surface; light is a deliberate inversion,
   not a plain white swap. Purple (#7975B7) is a signal color —
   used for actionable/interactive elements, not as wallpaper.
   ============================================================ */

:root {
  /* --- color: dark (default) --- */
  --bg: #0a0a10;
  --bg-raised: #101018;
  --surface: #131320;
  --surface-2: #191a28;
  --border: rgba(238, 237, 247, 0.09);
  --border-strong: rgba(238, 237, 247, 0.16);

  --text: #eeedf7;
  --text-muted: #a6a3bd;
  --text-faint: #6d6a86;

  --primary: #7975b7;
  --primary-strong: #9b96e0;
  --primary-soft: rgba(121, 117, 183, 0.14);
  --primary-border: rgba(121, 117, 183, 0.35);
  --on-primary: #101018;

  --accent-gold: #d9b25a;
  --success: #55c98a;
  --success-soft: rgba(85, 201, 138, 0.12);
  --warning: #d9b25a;
  --warning-soft: rgba(217, 178, 90, 0.12);
  --danger: #e2716f;
  --danger-soft: rgba(226, 113, 111, 0.12);

  --code-bg: #0e0e17;
  --code-text: #d7d5ea;
  --code-key: #9b96e0;
  --code-string: #8fcf9f;
  --code-number: #d9b25a;

  --shadow-soft: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 8px 24px rgba(0, 0, 0, 0.35);
  --glow-primary: 0 0 0 1px var(--primary-border), 0 0 32px rgba(121, 117, 183, 0.22);

  /* --- type --- */
  --font-display: "Space Grotesk", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.625rem;
  --text-2xl: 2.25rem;
  --text-3xl: 3.25rem;
  --text-4xl: 4.25rem;

  /* --- space (4px base) --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --sp-9: 6.5rem;

  /* --- radius: two sizes only, used with intent --- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-full: 999px;

  --container: 1180px;
  --header-h: 64px;
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}

[data-theme="light"] {
  --bg: #f3f2f9;
  --bg-raised: #ffffff;
  --surface: #ffffff;
  --surface-2: #ebeaf5;
  --border: rgba(22, 20, 40, 0.09);
  --border-strong: rgba(22, 20, 40, 0.16);

  --text: #17162a;
  --text-muted: #5c5875;
  --text-faint: #8b87a3;

  --primary: #635fa0;
  --primary-strong: #4d4986;
  --primary-soft: rgba(99, 95, 160, 0.09);
  --primary-border: rgba(99, 95, 160, 0.3);
  --on-primary: #ffffff;

  --accent-gold: #a5791f;
  --success: #1f9a5c;
  --success-soft: rgba(31, 154, 92, 0.1);
  --warning: #a5791f;
  --warning-soft: rgba(165, 121, 31, 0.1);
  --danger: #c8433f;
  --danger-soft: rgba(200, 67, 63, 0.1);

  --code-bg: #16152a;
  --code-text: #e4e2f2;
  --code-key: #b3aee8;
  --code-string: #6fbd82;
  --code-number: #a5791f;

  --shadow-soft: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 8px 24px rgba(22, 20, 40, 0.08);
  --glow-primary: 0 0 0 1px var(--primary-border), 0 0 32px rgba(99, 95, 160, 0.14);
}

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