/* ============================================================
   Studio Spectrum — design tokens
   Light (default) + dark theme, centered on CSS custom properties
   ============================================================ */

:root {
  color-scheme: light;

  /* --- Palette: Studio Spectrum (light) --- */
  --bg: #F7F5F0;
  --bg-elevated: #FFFDF8;
  --surface-glass: rgba(255, 255, 255, 0.62);
  --surface-glass-strong: rgba(255, 255, 255, 0.82);
  --surface-solid: #FFFFFF;
  --surface-2: #EFEEE7;

  --ink: #24263A;
  --muted: #62677C;

  --cobalt: #4263EB;
  --lavender: #B8A4FF;
  --coral: #FF876C;
  --lime: #D8F36A;
  --pale-blue: #DDEBFF;

  --cobalt-soft: rgba(66, 99, 235, 0.12);
  --lavender-soft: rgba(184, 164, 255, 0.22);
  --coral-soft: rgba(255, 135, 108, 0.18);
  --lime-soft: rgba(216, 243, 106, 0.32);

  --border: rgba(255, 255, 255, 0.72);
  --border-ink: rgba(36, 38, 58, 0.10);
  --border-strong: rgba(36, 38, 58, 0.16);

  --danger: #E5484D;
  --success: #2FA36B;
  --warning: #D98324;

  /* --- Elevation --- */
  --shadow-xs: 0 1px 2px rgba(36, 38, 58, 0.06);
  --shadow-sm: 0 2px 8px rgba(36, 38, 58, 0.07), 0 1px 2px rgba(36, 38, 58, 0.05);
  --shadow-md: 0 10px 30px rgba(36, 38, 58, 0.10), 0 2px 8px rgba(36, 38, 58, 0.06);
  --shadow-lg: 0 24px 60px rgba(36, 38, 58, 0.14), 0 6px 18px rgba(36, 38, 58, 0.08);
  --shadow-glow-cobalt: 0 10px 34px rgba(66, 99, 235, 0.28);
  --shadow-glow-lavender: 0 10px 34px rgba(184, 164, 255, 0.34);
  --shadow-glow-coral: 0 10px 34px rgba(255, 135, 108, 0.30);

  --glass-blur: 18px;
  --glass-saturate: 140%;

  /* --- Radii --- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* --- Typography --- */
  --font-head: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --fs-hero: clamp(2.6rem, 6vw, 4.6rem);
  --fs-h2: clamp(1.9rem, 3.6vw, 2.9rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.6rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9rem;
  --fs-tiny: 0.78rem;

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-med: 320ms;
  --dur-slow: 640ms;

  /* --- Layout --- */
  --nav-h: 72px;
  --container: 1200px;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);
  --section-y: clamp(4rem, 9vw, 7.5rem);

  /* --- Decorative gradients (light) --- */
  --grad-brand: linear-gradient(120deg, var(--cobalt) 0%, var(--lavender) 52%, var(--coral) 100%);
  --grad-soft: radial-gradient(120% 120% at 12% 8%, rgba(66, 99, 235, 0.16) 0%, rgba(66, 99, 235, 0) 55%),
               radial-gradient(100% 100% at 88% 18%, rgba(184, 164, 255, 0.24) 0%, rgba(184, 164, 255, 0) 58%),
               radial-gradient(120% 100% at 60% 96%, rgba(255, 135, 108, 0.16) 0%, rgba(255, 135, 108, 0) 60%);
  --page-tint: linear-gradient(180deg, #FBFAF6 0%, var(--bg) 42%, #F3F1EA 100%);
  --selection-bg: rgba(66, 99, 235, 0.22);
}

/* --- Palette: dark theme --- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #171827;
  --bg-elevated: #1D1E30;
  --surface-glass: rgba(39, 40, 63, 0.68);
  --surface-glass-strong: rgba(39, 40, 63, 0.88);
  --surface-solid: #212337;
  --surface-2: #24263A;

  --ink: #F6F4FF;
  --muted: #C0C2D4;

  --cobalt: #7291FF;
  --lavender: #C5B4FF;
  --coral: #FF967F;
  --lime: #D8F36A;
  --pale-blue: #2A3050;

  --cobalt-soft: rgba(114, 145, 255, 0.16);
  --lavender-soft: rgba(197, 180, 255, 0.16);
  --coral-soft: rgba(255, 150, 127, 0.16);
  --lime-soft: rgba(216, 243, 106, 0.18);

  --border: rgba(255, 255, 255, 0.14);
  --border-ink: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.24);

  --danger: #FF6369;
  --success: #4CC38A;
  --warning: #F2A65A;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.42), 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 14px 34px rgba(0, 0, 0, 0.48), 0 3px 10px rgba(0, 0, 0, 0.38);
  --shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.58), 0 8px 22px rgba(0, 0, 0, 0.44);
  --shadow-glow-cobalt: 0 12px 40px rgba(114, 145, 255, 0.34);
  --shadow-glow-lavender: 0 12px 40px rgba(197, 180, 255, 0.30);
  --shadow-glow-coral: 0 12px 40px rgba(255, 150, 127, 0.26);

  --page-tint: linear-gradient(180deg, #191A2B 0%, var(--bg) 42%, #14152300 100%);
  --selection-bg: rgba(114, 145, 255, 0.34);

  --grad-soft: radial-gradient(120% 120% at 12% 8%, rgba(114, 145, 255, 0.20) 0%, rgba(114, 145, 255, 0) 55%),
               radial-gradient(100% 100% at 88% 18%, rgba(197, 180, 255, 0.18) 0%, rgba(197, 180, 255, 0) 58%),
               radial-gradient(120% 100% at 60% 96%, rgba(255, 150, 127, 0.14) 0%, rgba(255, 150, 127, 0) 60%);
}

/* Theme transition (disabled during rapid toggling by JS) */
.theme-animated *,
.theme-animated *::before,
.theme-animated *::after {
  transition: background-color 380ms var(--ease-out),
              border-color 380ms var(--ease-out),
              color 380ms var(--ease-out),
              box-shadow 380ms var(--ease-out),
              fill 380ms var(--ease-out) !important;
}