/* =========================================================
   MacroVR — Colors & Type
   Source of truth: src/index.css + tailwind.config.ts in the
   gonzaloecu84/macrovrapps repo. Values are the exact HSL
   tokens used in production, translated to CSS variables.
   ========================================================= */

/* Fonts — loaded from Google Fonts to match the repo. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- BRAND / CORE ---------- */
  --mvr-red:          hsl(0 80% 50%);   /* primary brand red (logo) */
  --mvr-red-hot:      hsl(0 90% 55%);   /* gradient highlight */
  --mvr-red-deep:     hsl(0 70% 40%);   /* gradient shadow */
  --mvr-red-accent:   hsl(0 65% 42%);   /* accent red */
  --mvr-red-danger:   hsl(0 84% 60%);   /* destructive */
  --mvr-white:        hsl(0 0% 100%);
  --mvr-black:        hsl(0 0% 4%);     /* canvas black (not pure) */
  --mvr-ink:          hsl(0 0% 0%);     /* pure black for logo */

  /* ---------- NEUTRAL SCALE (all zero-saturation) ---------- */
  --mvr-neutral-0:    hsl(0 0% 4%);     /* background */
  --mvr-neutral-50:   hsl(0 0% 6%);     /* sidebar bg */
  --mvr-neutral-100:  hsl(0 0% 8%);     /* card / popover */
  --mvr-neutral-200:  hsl(0 0% 10%);    /* muted */
  --mvr-neutral-300:  hsl(0 0% 12%);    /* secondary */
  --mvr-neutral-400:  hsl(0 0% 15%);    /* border / input */
  --mvr-neutral-500:  hsl(0 0% 25%);
  --mvr-neutral-600:  hsl(0 0% 55%);    /* muted-foreground */
  --mvr-neutral-700:  hsl(0 0% 75%);
  --mvr-neutral-800:  hsl(0 0% 90%);    /* secondary-fg */
  --mvr-neutral-900:  hsl(0 0% 95%);    /* foreground */
  --mvr-neutral-1000: hsl(0 0% 98%);

  /* ---------- SEMANTIC (aliases of the repo's CSS vars) ---------- */
  --bg:               var(--mvr-neutral-0);
  --bg-elevated:      var(--mvr-neutral-100);   /* cards */
  --bg-muted:         var(--mvr-neutral-200);
  --bg-secondary:     var(--mvr-neutral-300);

  --fg:               var(--mvr-neutral-900);   /* primary text */
  --fg-muted:         var(--mvr-neutral-600);   /* secondary text */
  --fg-subtle:        var(--mvr-neutral-500);

  --border:           var(--mvr-neutral-400);
  --border-subtle:    hsl(0 0% 15% / 0.5);
  --input:            var(--mvr-neutral-400);
  --ring:             var(--mvr-red);

  --primary:          var(--mvr-red);
  --primary-fg:       var(--mvr-white);
  --accent:           var(--mvr-red-accent);
  --accent-fg:        var(--mvr-white);
  --destructive:      var(--mvr-red-danger);

  /* ---------- GLOW / GLASS ---------- */
  --glow-primary:     0 0 40px -10px hsl(0 80% 50% / 0.5);
  --glow-card:        0 0 30px -15px hsl(0 80% 50% / 0.15);
  --glass-bg:         hsl(0 0% 8% / 0.6);
  --glass-border:     hsl(0 0% 15% / 0.5);

  /* ---------- GRADIENTS ---------- */
  --gradient-primary: linear-gradient(135deg, hsl(0 90% 55%), hsl(0 70% 40%));
  --gradient-glow-h:  linear-gradient(90deg, transparent, hsl(0 80% 50% / 0.2), transparent);
  --gradient-hero:    linear-gradient(180deg, hsl(0 0% 4%) 0%, hsl(0 0% 6%) 100%);

  /* ---------- RADII ---------- */
  --radius-sm:    calc(var(--radius) - 4px);    /* 8px  */
  --radius-md:    calc(var(--radius) - 2px);    /* 10px */
  --radius:       0.75rem;                      /* 12px — base */
  --radius-lg:    1rem;                         /* 16px */
  --radius-xl:    1.5rem;                       /* 24px — cards */
  --radius-2xl:   2rem;                         /* 32px — CTA blocks */
  --radius-full:  9999px;                       /* pills */

  /* ---------- SPACING (Tailwind scale, explicit) ---------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-28: 7rem;    /* section-padding py */

  /* ---------- SHADOWS ---------- */
  --shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.4);
  --shadow-md: 0 4px 12px hsl(0 0% 0% / 0.4);
  --shadow-lg: 0 12px 32px hsl(0 0% 0% / 0.5), 0 0 0 1px hsl(0 0% 15% / 0.5);
  --shadow-primary-sm: 0 0 0 1px hsl(0 80% 50% / 0.08), 0 4px 12px hsl(0 0% 0% / 0.4);

  /* ---------- MOTION ---------- */
  --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);  /* THE brand easing */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   200ms;
  --dur-base:   300ms;
  --dur-slow:   500ms;
  --dur-hero:   800ms;

  /* ---------- TYPE ---------- */
  --font-heading: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Sizes — repo uses text-{size} Tailwind scale */
  --fs-xs:    0.75rem;   /* 12 — labels */
  --fs-sm:    0.875rem;  /* 14 — nav, ui */
  --fs-base:  1rem;      /* 16 — body */
  --fs-lg:    1.125rem;  /* 18 — large body */
  --fs-xl:    1.25rem;   /* 20 — subhead */
  --fs-2xl:   1.5rem;    /* 24 — h3 */
  --fs-3xl:   1.875rem;  /* 30 — h2 mobile */
  --fs-4xl:   2.25rem;   /* 36 — h1 mobile */
  --fs-5xl:   3rem;      /* 48 — h2 desktop */
  --fs-6xl:   3.75rem;   /* 60 */
  --fs-7xl:   4.5rem;    /* 72 — hero desktop */

  /* Weights — repo uses 400/500/600/700 */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Line heights */
  --lh-tight:    1.1;    /* hero */
  --lh-snug:     1.25;   /* headings */
  --lh-normal:   1.5;    /* body */
  --lh-relaxed:  1.625;  /* long-form body */
}

/* ---------- BASE ELEMENT STYLES ---------- */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  line-height: var(--lh-snug);
  color: var(--fg);
}

h1 { font-size: clamp(var(--fs-4xl), 6vw, var(--fs-7xl)); line-height: var(--lh-tight); }
h2 { font-size: clamp(var(--fs-3xl), 4.5vw, var(--fs-5xl)); }
h3 { font-size: var(--fs-2xl); font-weight: var(--fw-semibold); }
h4 { font-size: var(--fs-xl); font-weight: var(--fw-semibold); }
h5 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
h6 { font-size: var(--fs-base); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.08em; }

p  { color: var(--fg-muted); line-height: var(--lh-relaxed); }

code, pre, kbd { font-family: var(--font-mono); font-size: 0.95em; }
code { background: var(--bg-muted); padding: 0.125em 0.375em; border-radius: var(--radius-sm); color: var(--fg); }

a { color: var(--primary); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { color: hsl(0 90% 60%); }

/* ---------- UTILITY CLASSES (ported from repo) ---------- */
.text-gradient-primary {
  background-image: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.glow-primary { box-shadow: var(--glow-primary); }
.glow-card    { box-shadow: var(--glow-card); }

.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
}

.section-padding {
  padding: var(--space-20) var(--space-4);
}
@media (min-width: 768px) {
  .section-padding { padding: var(--space-28) var(--space-8); }
}

/* Pulse glow — used behind hero + CTAs */
@keyframes mvr-pulse-glow {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.8; }
}
.animate-pulse-glow { animation: mvr-pulse-glow 3s ease-in-out infinite; }

@keyframes mvr-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
.animate-float { animation: mvr-float 6s ease-in-out infinite; }