/* ========================================
   MACOWA — Design Tokens & CSS Custom Properties
   Aurora · Glass · Kinetic
   ======================================== */

:root {
  /* ── Color Palette ─────────────────────── */

  /* Backgrounds — layered depth system */
  --bg-void:      hsl(240, 18%, 5%);        /* deepest layer */
  --bg-surface:   hsl(240, 14%, 9%);        /* cards, panels */
  --bg-elevated:  hsl(240, 12%, 13%);       /* raised elements */
  --bg-tint:      hsl(240, 18%, 11%);       /* subtle warm-cool wash */

  /* Solid accent — MACOWA Chevron Blue */
  --accent-primary:   #1FA8E0;              /* bright chevron blue */
  --accent-deep:      #1F3A5F;              /* owl body navy */
  --accent-light:     #38BDF8;              /* lifted blue for hover */
  --accent-secondary: #1FA8E0;
  --accent-ink:       #0a1626;              /* dark text on light fills */
  --accent-navy:      #1F3A5F;

  /* Legacy aliases — keep resolving so older selectors don't break */
  --accent-emerald: var(--accent-primary);
  --accent-teal:    var(--accent-primary);
  --accent-cyan:    var(--accent-primary);
  --accent-lime:    var(--accent-light);
  --accent-violet:  var(--accent-primary);
  --accent-blue:    var(--accent-primary);
  --accent-pink:    var(--accent-light);

  --gradient-start: var(--accent-primary);
  --gradient-mid:   var(--accent-primary);
  --gradient-end:   var(--accent-primary);

  /* Brand fill — solid chevron blue */
  --grad-brand:       var(--accent-primary);

  --grad-brand-soft:  rgba(31, 168, 224, 0.12);

  --grad-radial-glow:
    radial-gradient(circle at 50% 50%,
      rgba(31, 168, 224, 0.42) 0%,
      rgba(31, 168, 224, 0.18) 35%,
      transparent 70%);

  /* Text */
  --text-primary:    #ffffff;
  --text-secondary:  hsl(240, 8%, 70%);
  --text-muted:      hsl(240, 6%, 50%);

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

  /* Glassmorphism */
  --glass-bg:        rgba(22, 22, 29, 0.55);
  --glass-bg-heavy:  rgba(22, 22, 29, 0.78);
  --glass-border:    rgba(255, 255, 255, 0.08);
  --glass-border-hi: rgba(255, 255, 255, 0.16);
  --glass-blur:      22px;

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

  --fs-hero:    clamp(3rem, 7vw, 7rem);
  --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-max:     1240px;
  --container-padding: clamp(1rem, 5vw, 3rem);

  /* ── Effects & Decorations ─────────────── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 9999px;

  --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 40px rgba(31, 168, 224, 0.35);
  --shadow-cyan:  0 0 40px rgba(31, 168, 224, 0.30);
  --shadow-lime:  0 0 32px rgba(56, 189, 248, 0.30);
  --shadow-aura:  0 20px 80px rgba(31, 168, 224, 0.30),
                  0 0 0 1px rgba(255, 255, 255, 0.06) inset;

  /* Easings */
  --ease-out-quart:    cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1);
  --ease-spring:       cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Durations */
  --transition-fast: 0.2s var(--ease-out-quart);
  --transition-base: 0.35s var(--ease-out-quart);
  --transition-slow: 0.7s var(--ease-out-expo);

  /* Noise (subtle film grain — pure SVG, no external assets) */
  --noise-bg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}