/* ═══════════════════════════════════════════════════
   TOKENS.CSS — Apple Liquid Glass Design Tokens
   Performance-first: blur only on key surfaces
═══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ── Color Palette ── */
  --bg-primary:   #d8e4f5;

  --text-primary:   #0a0c18;
  --text-secondary: #2c2f4a;
  --text-muted:     #6b7191;
  --text-faint:     #9fa5c0;

  /* ── Accent ── */
  --accent:       hsl(230, 75%, 55%);
  --accent-light: hsl(230, 85%, 68%);
  --accent-dark:  hsl(230, 70%, 42%);
  --accent-soft:  hsla(230, 75%, 55%, 0.10);
  --accent-soft2: hsla(230, 75%, 55%, 0.05);

  --violet:  hsl(260, 70%, 58%);
  --teal:    hsl(185, 60%, 45%);
  --emerald: hsl(155, 55%, 42%);
  --rose:    hsl(350, 70%, 55%);
  --amber:   hsl(38, 88%, 52%);

  /* ══════════════════════════════════════════
     APPLE LIQUID GLASS MATERIAL SYSTEM
     Key insight: Apple glass = thin white base
     + iridescent tint + strong rim + refraction
  ══════════════════════════════════════════ */

  /* Tier 1 — NAVBAR ONLY (full blur, 1 element) */
  --glass-nav-bg:     rgba(255,255,255,0.22);
  --glass-nav-blur:   blur(28px) saturate(1.8);

  /* Tier 2 — Hero panels (medium blur, few elements) */
  --glass-panel-bg:   rgba(255,255,255,0.18);
  --glass-panel-blur: blur(20px) saturate(1.6);

  /* Tier 3 — Cards (NO backdrop-filter for perf!) */
  /* Instead: white base + gradient sheen + border */
  --glass-card-bg:    rgba(255,255,255,0.62);
  --glass-card-border: rgba(255,255,255,0.90);

  /* Apple specular: the "lit edge" that makes it glass */
  --glass-specular: linear-gradient(
    145deg,
    rgba(255,255,255,0.85) 0%,
    rgba(255,255,255,0.30) 25%,
    rgba(255,255,255,0.05) 55%,
    rgba(255,255,255,0.12) 100%
  );

  /* Apple iridescence: subtle blue-violet tint */
  --glass-iridescent: linear-gradient(
    135deg,
    hsla(210,100%,95%,0.35) 0%,
    hsla(240,80%,96%,0.15) 40%,
    hsla(270,70%,96%,0.20) 70%,
    hsla(200,90%,95%,0.30) 100%
  );

  /* Shadow: very soft, light-themed */
  --glass-shadow-sm: 0 2px 12px rgba(60,70,140,0.08),
                     0 1px 0   rgba(255,255,255,0.92) inset;
  --glass-shadow-md: 0 8px 28px rgba(60,70,140,0.12),
                     0 1px 0   rgba(255,255,255,0.95) inset;
  --glass-shadow-lg: 0 20px 50px rgba(60,70,140,0.16),
                     0 1px 0   rgba(255,255,255,0.98) inset;

  /* ── Gradients ── */
  --grad-primary: linear-gradient(135deg, hsl(230,75%,55%) 0%, hsl(260,70%,58%) 100%);
  --grad-soft:    linear-gradient(135deg, hsla(230,75%,55%,0.14) 0%, hsla(260,70%,58%,0.10) 100%);

  /* Background — the canvas behind the glass (crucial!) */
  --grad-bg: linear-gradient(160deg,
    #c8d8f5 0%,
    #d8e0f8 20%,
    #e0d8f8 40%,
    #d8e8f8 60%,
    #ccd8f0 80%,
    #d4def8 100%
  );

  /* ── Typography ── */
  --font-sans: 'Outfit', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* ── Spacing ── */
  --sp-1:  0.25rem;  --sp-2:  0.5rem;   --sp-3:  0.75rem;
  --sp-4:  1rem;     --sp-5:  1.25rem;  --sp-6:  1.5rem;
  --sp-8:  2rem;     --sp-10: 2.5rem;   --sp-12: 3rem;
  --sp-16: 4rem;     --sp-20: 5rem;     --sp-24: 6rem;

  /* ── Radius ── */
  --r-sm:   8px;  --r-md:  14px;  --r-lg:  20px;
  --r-xl:   28px; --r-2xl: 36px;  --r-full: 9999px;

  /* ── Transitions ── */
  --t-fast:   0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --t-base:   0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow:   0.4s  cubic-bezier(0.4, 0, 0.2, 1);
  --t-spring: 0.5s  cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Layout ── */
  --container:   1200px;
  --nav-height:  66px;
  --section-gap: 7rem;

  /* ── Legacy compat vars ── */
  --glass-bg:           var(--glass-card-bg);
  --glass-bg-hover:     rgba(255,255,255,0.80);
  --glass-bg-strong:    rgba(255,255,255,0.75);
  --glass-border:       var(--glass-card-border);
  --glass-border-subtle: rgba(220,225,245,0.55);
  --glass-blur:         var(--glass-panel-blur);
  --glass-blur-sm:      blur(14px) saturate(1.5);
  --glass-shadow:       var(--glass-shadow-md);
  --glass-shadow-lg:    var(--glass-shadow-lg);
  --surface-1: rgba(255,255,255,0.62);
  --surface-2: rgba(255,255,255,0.45);
  --white:     #ffffff;
}