/* ==========================================================================
   Ravshanov Digital — Design Tokens
   Single source of truth for color, type, space, radius, shadow, motion.
   Dark is the default theme; light is applied via [data-theme="light"].
   ========================================================================== */

:root {
  /* ---- Type families ---- */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;

  /* ---- Fluid type scale (clamp: min .. max) ---- */
  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0:  clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  --step-1:  clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
  --step-2:  clamp(1.45rem, 1.28rem + 0.7vw, 1.85rem);
  --step-3:  clamp(1.9rem, 1.6rem + 1.3vw, 2.6rem);
  --step-4:  clamp(2.35rem, 1.9rem + 2.1vw, 3.5rem);
  --step-5:  clamp(2.9rem, 2.3rem + 2.9vw, 4.7rem);

  /* ---- Weights ---- */
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;
  --w-extrabold: 800;

  /* ---- Spacing (4px base rhythm) ---- */
  --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;
  --space-11: 10rem;

  /* ---- Radius (squircle-leaning) ---- */
  --r-sm: 0.625rem;
  --r-md: 1rem;
  --r-lg: 1.5rem;
  --r-xl: 2rem;
  --r-2xl: 2.5rem;
  --r-pill: 999px;

  /* ---- Layout ---- */
  --container: 1200px;
  --container-wide: 1360px;
  --gutter: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);

  /* ---- Motion ---- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 220ms;
  --dur-mid: 420ms;
  --dur-slow: 720ms;

  /* ---- Z-index layers ---- */
  --z-nav: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;

  /* ================= DARK THEME (default) ================= */
  --bg: #05060b;
  --bg-elev: #0a0c14;
  --bg-elev-2: #10131d;
  --surface: rgba(255, 255, 255, 0.024);
  --surface-2: rgba(255, 255, 255, 0.04);
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.14);
  --inner-hi: rgba(255, 255, 255, 0.12);

  --text: #eef1f7;
  --text-muted: #a3adbe;
  --text-dim: #6c7688;

  --accent: #6d6cff;
  --accent-hi: #8a8bff;
  --accent-soft: rgba(109, 108, 255, 0.14);
  --live: #3ddc97;
  --live-soft: rgba(61, 220, 151, 0.14);

  /* placeholder image box (as requested: white box + centered dimensions) */
  --ph-bg: #ffffff;
  --ph-fg: #0a0c14;
  --ph-sub: #5b6472;
  --ph-border: rgba(255, 255, 255, 0.16);

  --shadow-soft: 0 1px 0 rgba(255,255,255,0.04) inset, 0 30px 60px -30px rgba(0,0,0,0.7);
  --shadow-lift: 0 40px 80px -40px rgba(0,0,0,0.85);
  --glow: 0 0 80px -20px rgba(109,108,255,0.45);
  color-scheme: dark;
}

/* ================= LIGHT THEME ================= */
[data-theme="light"] {
  --bg: #f6f7fb;
  --bg-elev: #ffffff;
  --bg-elev-2: #ffffff;
  --surface: rgba(9, 12, 20, 0.02);
  --surface-2: rgba(9, 12, 20, 0.035);
  --hairline: rgba(9, 12, 20, 0.09);
  --hairline-strong: rgba(9, 12, 20, 0.16);
  --inner-hi: rgba(255, 255, 255, 0.9);

  --text: #0c1018;
  --text-muted: #4a5568;
  --text-dim: #8a93a4;

  --accent: #4f4df0;
  --accent-hi: #3936d6;
  --accent-soft: rgba(79, 77, 240, 0.1);
  --live: #12a768;
  --live-soft: rgba(18, 167, 104, 0.12);

  --ph-bg: #ffffff;
  --ph-fg: #0a0c14;
  --ph-sub: #5b6472;
  --ph-border: rgba(9, 12, 20, 0.14);

  --shadow-soft: 0 1px 2px rgba(9,12,20,0.04), 0 20px 40px -28px rgba(9,12,20,0.28);
  --shadow-lift: 0 40px 80px -44px rgba(9,12,20,0.32);
  --glow: 0 0 80px -24px rgba(79,77,240,0.3);
  color-scheme: light;
}