/* ==========================================================================
   CRONK AI — Synthwave / Miami-noir Tokens
   Forks the Cronk Nutrients dark glass system; swaps lime → neon magenta,
   adds cyan + violet accents and a retro terminal accent type.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=VT323&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ---- SURFACES ------------------------------------------------- */
  --ink-0: #050518;          /* deepest base / page bg bottom */
  --ink-1: #0a0a22;          /* page bg main */
  --ink-2: #110b2e;          /* section / glass body */
  --ink-3: #1a0f3d;          /* lifted card */
  --ink-4: #261760;          /* hover lift */

  /* ---- NEON PALETTE -------------------------------------------- */
  --neon-pink:    #ff2e93;   /* primary CTA, focal accent */
  --neon-pink-2:  #ff5fb1;   /* hover */
  --neon-cyan:    #2cf6ff;   /* secondary accent, links, code */
  --neon-purple:  #a855ff;   /* tertiary highlight */
  --neon-yellow:  #ffd60a;   /* small caution / micro highlights */
  --neon-orange:  #ff7a3d;   /* sunset gradient mid */

  /* Soft / glow / line variants */
  --neon-pink-glow:  rgba(255, 46, 147, 0.45);
  --neon-cyan-glow:  rgba(44, 246, 255, 0.40);
  --neon-purple-glow:rgba(168, 85, 255, 0.40);
  --neon-pink-soft:  rgba(255, 46, 147, 0.12);
  --neon-cyan-soft:  rgba(44, 246, 255, 0.10);

  /* Signature sunset gradient */
  --gradient-sunset: linear-gradient(90deg, var(--neon-pink) 0%, var(--neon-purple) 50%, var(--neon-cyan) 100%);
  --gradient-night:  linear-gradient(180deg, var(--ink-0) 0%, var(--ink-1) 40%, var(--ink-0) 100%);

  /* ---- NEUTRALS ------------------------------------------------ */
  --white:        #ffffff;
  --light-gray:   rgba(255, 255, 255, 0.82);
  --muted-gray:   rgba(255, 255, 255, 0.58);
  --faint-gray:   rgba(255, 255, 255, 0.38);

  /* Borders (neon-tinted, low alpha) */
  --border:        rgba(255, 95, 177, 0.12);
  --border-hover:  rgba(255, 95, 177, 0.32);
  --border-strong: rgba(255, 95, 177, 0.50);
  --border-cyan:   rgba(44, 246, 255, 0.18);

  /* Glass */
  --glass-bg:   rgba(20, 12, 48, 0.50);
  --glass-bg-2: rgba(20, 12, 48, 0.66);
  --glass-blur: blur(22px);

  /* Status */
  --success: #5eff8a;
  --warn:    #ffd60a;
  --error:   #ff4c6a;

  /* ---- TYPOGRAPHY ---------------------------------------------- */
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  --font-pixel:   'VT323', 'JetBrains Mono', monospace;

  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-22: 1.375rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-56: 3.5rem;
  --fs-72: 4.5rem;
  --fs-88: 5.5rem;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  --lh-tight: 1.05;
  --lh-snug: 1.15;
  --lh-normal: 1.40;
  --lh-relaxed: 1.60;

  --ls-tight: -0.025em;
  --ls-snug:  -0.012em;
  --ls-normal: 0;
  --ls-wide:  0.06em;
  --ls-widest:0.14em;

  /* ---- SPACING / RADII / SHADOWS ------------------------------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px;
  --space-9: 48px; --space-10: 60px; --space-12: 80px; --space-14: 100px;
  --space-16: 120px; --space-20: 160px;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-pill: 999px;

  --shadow-sm: 0 4px 14px rgba(0,0,0,0.40);
  --shadow-md: 0 10px 32px rgba(0,0,0,0.55);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.65);

  --shadow-pink:  0 0 32px var(--neon-pink-glow);
  --shadow-cyan:  0 0 28px var(--neon-cyan-glow);
  --shadow-pink-strong: 0 8px 40px var(--neon-pink-glow), 0 0 0 1px rgba(255,46,147,0.30) inset;

  --container-max: 1240px;
  --container-narrow: 920px;
}