/* ============================================================
   STELLAR 2026 — Design Tokens (CSS Custom Properties)
   ============================================================ */

:root {
  /* ── Color Palette ── */
  --bg-twilight-dark: #2A1B4D;
  --bg-twilight-base: #5B4E71;
  --bg-mint: #B8F5D8;
  --bg-yellow-pastel: #FFF5CC;

  --accent-purple-deep: #670077;
  --accent-purple-deep-rgb: 103, 0, 119;
  --accent-cyan-neon: #00E5FF;
  --accent-cyan-neon-rgb: 0, 229, 255;
  --accent-orange: #FF8C42;
  --accent-orange-rgb: 255, 140, 66;

  --text-title-cyan: #00FFF2;
  --text-pill-cyan: #ACF7FF;
  --outline-navy: #1A1040;
  --outline-navy-rgb: 26, 16, 64;

  --white: #FFFFFF;
  --white-rgb: 255, 255, 255;
  --black: #0D0D0D;

  /* ── Gradient Presets ── */
  --gradient-twilight: linear-gradient(165deg, var(--bg-twilight-dark) 0%, var(--bg-twilight-base) 40%, #7B6F99 65%, var(--bg-mint) 100%);
  --gradient-twilight-vertical: linear-gradient(180deg, var(--bg-twilight-dark) 0%, var(--bg-twilight-base) 50%, var(--bg-mint) 100%);
  --gradient-hero: linear-gradient(170deg, #1a0e35 0%, var(--bg-twilight-dark) 30%, var(--bg-twilight-base) 60%, #8ecfb5 85%, var(--bg-mint) 100%);
  --gradient-card-hover: linear-gradient(135deg, rgba(var(--accent-purple-deep-rgb), 0.9), rgba(103, 0, 119, 0.7));
  --gradient-navbar: linear-gradient(90deg, rgba(var(--outline-navy-rgb), 0.92), rgba(42, 27, 77, 0.92));

  /* ── Typography ── */
  --font-display: 'Bungee', 'Fredoka', sans-serif;
  --font-heading: 'Caudex', 'Georgia', serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  --fs-hero: clamp(2.5rem, 6vw, 5rem);
  --fs-h1: clamp(2rem, 4vw, 3.5rem);
  --fs-h2: clamp(1.5rem, 3vw, 2.5rem);
  --fs-h3: clamp(1.2rem, 2.2vw, 1.75rem);
  --fs-h4: clamp(1rem, 1.8vw, 1.35rem);
  --fs-body: clamp(0.9rem, 1.2vw, 1.05rem);
  --fs-small: clamp(0.78rem, 1vw, 0.9rem);
  --fs-xs: clamp(0.7rem, 0.85vw, 0.8rem);

  /* ── Spacing ── */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-section: clamp(3rem, 8vw, 6rem);

  /* ── Border Radius ── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* ── Shadows (Neubrutalism / Sticker style) ── */
  --shadow-sticker: 
    4px 4px 0 var(--outline-navy),
    -1px -1px 0 rgba(var(--accent-cyan-neon-rgb), 0.15);
  --shadow-sticker-lg: 
    6px 6px 0 var(--outline-navy),
    -2px -2px 0 rgba(var(--accent-cyan-neon-rgb), 0.1);
  --shadow-sticker-hover: 
    8px 8px 0 var(--outline-navy),
    -2px -2px 0 rgba(var(--accent-cyan-neon-rgb), 0.2);
  --shadow-glow-cyan: 
    0 0 12px rgba(var(--accent-cyan-neon-rgb), 0.5),
    0 0 24px rgba(var(--accent-cyan-neon-rgb), 0.25);
  --shadow-glow-cyan-sm: 
    0 0 6px rgba(var(--accent-cyan-neon-rgb), 0.4),
    0 0 12px rgba(var(--accent-cyan-neon-rgb), 0.15);
  --shadow-card: 
    5px 5px 0 var(--outline-navy),
    0 0 0 2px var(--accent-cyan-neon),
    0 0 15px rgba(var(--accent-cyan-neon-rgb), 0.15);

  /* ── Transitions ── */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
  --transition-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-index scale ── */
  --z-stars: 0;
  --z-content: 1;
  --z-card: 10;
  --z-navbar: 100;
  --z-overlay: 500;
  --z-modal: 900;
  --z-loading: 1000;
}