/* ========================================
   MACOWA — Design Tokens & CSS Custom Properties
   Electric Violet → Cyber Teal
   ======================================== */

:root {
  /* ── Color Palette ─────────────────────── */
  
  /* Backgrounds — layered depth system */
  --bg-void:      hsl(240, 15%, 6%);       /* #0e0e13  deepest layer */
  --bg-surface:   hsl(240, 12%, 10%);      /* #16161d  cards, panels */
  --bg-elevated:  hsl(240, 10%, 14%);      /* #202028  raised elements */

  /* Accent — electric violet & cyber teal */
  --accent-primary:   hsl(217, 91%, 60%);  /* #3b82f6 */
  --accent-secondary: hsl(217, 91%, 60%);  /* #3b82f6 */

  /* Gradient endpoints */
  --gradient-start: hsl(217, 91%, 60%);    /* #3b82f6 */
  --gradient-end:   hsl(217, 91%, 60%);    /* #3b82f6 */

  /* Text */
  --text-primary:   #ffffff;               /* Crisp pure white */
  --text-secondary: hsl(240, 5%, 65%);     /* Brighter gray, less dull */

  /* Semantic */
  --danger: hsl(0, 75%, 60%);              /* #e04545 */
  --white:  #ffffff;

  /* Glassmorphism */
  --glass-bg:     rgba(22, 22, 29, 0.6);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-blur:   20px;


  /* ── Typography ────────────────────────── */

  /* Font families */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Fluid font sizes */
  --fs-hero:    clamp(3rem, 6vw, 6rem);
  --fs-h1:      clamp(2.2rem, 4vw, 3.5rem);
  --fs-h2:      clamp(1.8rem, 3vw, 2.5rem);
  --fs-h3:      clamp(1.2rem, 2vw, 1.5rem);
  --fs-body:    clamp(1rem, 1.2vw, 1.125rem);
  --fs-small:   0.875rem;
  --fs-caption: 0.8125rem;


  /* ── Spacing Scale ─────────────────────── */

  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: 10rem;

  /* Container */
  --container-max:     1200px;
  --container-padding: clamp(1rem, 5vw, 3rem);


  /* ── Effects & Decorations ─────────────── */

  /* Border radii */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-full: 9999px;

  /* Shadows — layered depth */
  --shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md:   0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-lg:   0 16px 64px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 30px rgba(59, 130, 246, 0.3);

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.6s ease;
}