/* ============================================================
   5MinHelp — Design System Foundation
   main.css — Variables, Reset, Typography, Utilities
   ============================================================ */

/* ─── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Space+Grotesk:wght@300..700&family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ─── Design Tokens ─────────────────────────────────────────── */
:root {
  /* ── Primary Palette ─── */
  --clr-primary:        #6366f1;
  --clr-primary-dark:   #4f46e5;
  --clr-primary-light:  #818cf8;
  --clr-primary-rgb:    99, 102, 241;

  --clr-secondary:      #06b6d4;
  --clr-secondary-dark: #0891b2;
  --clr-secondary-rgb:  6, 182, 212;

  --clr-accent:         #8b5cf6;
  --clr-accent-dark:    #7c3aed;
  --clr-accent-rgb:     139, 92, 246;

  /* ── Status Colors ─── */
  --clr-gold:    #f59e0b;
  --clr-green:   #10b981;
  --clr-orange:  #f97316;
  --clr-red:     #ef4444;

  /* ── Background Layers ─── */
  --bg-base:       #06080f;
  --bg-dark:       #080b14;
  --bg-surface:    #0d1220;
  --bg-elevated:   #111827;
  --bg-card:       rgba(13, 18, 36, 0.72);
  --bg-card-hover: rgba(20, 28, 58, 0.88);
  --bg-glass:      rgba(255, 255, 255, 0.03);
  --bg-glass-md:   rgba(255, 255, 255, 0.06);
  --bg-glass-lg:   rgba(255, 255, 255, 0.10);

  /* ── Text Colors ─── */
  --text-primary:   #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted:     #475569;
  --text-accent:    #6366f1;

  /* ── Borders ─── */
  --border-glass:    rgba(255, 255, 255, 0.08);
  --border-primary:  rgba(99, 102, 241, 0.3);
  --border-subtle:   rgba(255, 255, 255, 0.05);

  /* ── Gradients ─── */
  --gradient-primary:  linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%);
  --gradient-secondary:linear-gradient(135deg, #06b6d4 0%, #6366f1 100%);
  --gradient-hero:     linear-gradient(160deg, #080b14 0%, #0f172a 40%, #1a103c 70%, #0c1440 100%);
  --gradient-card:     linear-gradient(135deg, rgba(99,102,241,0.12) 0%, rgba(139,92,246,0.06) 100%);
  --gradient-glow:     radial-gradient(circle at 50% 50%, rgba(99,102,241,0.15) 0%, transparent 70%);
  --gradient-text:     linear-gradient(135deg, #6366f1, #a78bfa, #06b6d4);
  --gradient-gold:     linear-gradient(135deg, #f59e0b, #fbbf24);

  /* ── Shadows ─── */
  --shadow-xs:    0 1px 4px rgba(0,0,0,0.25);
  --shadow-sm:    0 2px 12px rgba(0,0,0,0.35);
  --shadow-md:    0 8px 32px rgba(0,0,0,0.45);
  --shadow-lg:    0 20px 64px rgba(0,0,0,0.55);
  --shadow-xl:    0 40px 100px rgba(0,0,0,0.65);
  --shadow-glow:  0 0 40px rgba(99,102,241,0.35), 0 0 80px rgba(99,102,241,0.15);
  --shadow-cyan:  0 0 40px rgba(6,182,212,0.25);
  --shadow-card:  0 4px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);

  /* ── Border Radius ─── */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-2xl:  40px;
  --radius-full: 9999px;

  /* ── Spacing Scale ─── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;

  /* ── Container ─── */
  --container-max:     1400px;
  --container-wide:    1600px;
  --container-narrow:  960px;
  --container-pad:     clamp(16px, 5vw, 80px);

  /* ── Typography ─── */
  --font-sans:   'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --font-alt:    'Space Grotesk', sans-serif;
  --font-mono:   'JetBrains Mono', 'Fira Code', monospace;

  /* Fluid type scale using clamp(min, preferred, max) */
  --text-2xs:   clamp(0.625rem, 1vw,    0.7rem);
  --text-xs:    clamp(0.7rem,   1.2vw,  0.75rem);
  --text-sm:    clamp(0.8rem,   1.5vw,  0.875rem);
  --text-base:  clamp(0.875rem, 1.8vw,  1rem);
  --text-lg:    clamp(1rem,     2vw,    1.125rem);
  --text-xl:    clamp(1.1rem,   2.2vw,  1.25rem);
  --text-2xl:   clamp(1.25rem,  2.8vw,  1.5rem);
  --text-3xl:   clamp(1.5rem,   3.5vw,  1.875rem);
  --text-4xl:   clamp(1.875rem, 4.5vw,  2.5rem);
  --text-5xl:   clamp(2.25rem,  6vw,    3.5rem);
  --text-6xl:   clamp(2.75rem,  8vw,    5rem);
  --text-7xl:   clamp(3.25rem,  10vw,   7rem);
  --text-8xl:   clamp(4rem,     12vw,   9rem);

  /* ── Transitions ─── */
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-xs:  100ms var(--ease-out);
  --transition-sm:  200ms var(--ease-out);
  --transition-md:  300ms var(--ease-out);
  --transition-lg:  500ms var(--ease-out);
  --transition-xl:  700ms var(--ease-out);

  /* ── Z-index Stack ─── */
  --z-base:      1;
  --z-above:     10;
  --z-dropdown:  100;
  --z-floating:  500;
  --z-modal:     800;
  --z-navbar:    1000;
  --z-cursor:    9998;
  --z-loader:    9999;

  /* ── Blur ─── */
  --blur-sm:   8px;
  --blur-md:   16px;
  --blur-lg:   32px;
  --blur-xl:   64px;
}

/* ─── Light Theme Overrides ──────────────────────────────────── */
[data-theme="light"] {
  --bg-base:       #f8faff;
  --bg-dark:       #f0f4ff;
  --bg-surface:    #ffffff;
  --bg-elevated:   #ffffff;
  --bg-card:       rgba(255, 255, 255, 0.85);
  --bg-card-hover: rgba(255, 255, 255, 0.98);
  --bg-glass:      rgba(99, 102, 241, 0.04);
  --bg-glass-md:   rgba(99, 102, 241, 0.07);
  --bg-glass-lg:   rgba(99, 102, 241, 0.12);
  --text-primary:  #0f172a;
  --text-secondary:#334155;
  --text-muted:    #64748b;
  --border-glass:  rgba(99, 102, 241, 0.15);
  --border-subtle: rgba(0, 0, 0, 0.06);
  --shadow-card:   0 4px 24px rgba(99,102,241,0.12), 0 1px 4px rgba(0,0,0,0.06);
  --shadow-md:     0 8px 32px rgba(0,0,0,0.12);
  --shadow-lg:     0 20px 60px rgba(0,0,0,0.18);
  --gradient-hero: linear-gradient(160deg, #f0f4ff 0%, #e8edff 50%, #f4f0ff 100%);
}

/* ─── CSS Reset ──────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-primary);
  background-color: var(--bg-base);
  overflow-x: hidden;
  min-height: 100vh;
  transition: background-color var(--transition-md), color var(--transition-md);
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb { background: var(--clr-primary); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--clr-primary-light); }

/* Selection */
::selection {
  background: rgba(99, 102, 241, 0.3);
  color: var(--text-primary);
}

/* ─── Typography ─────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

h1 { font-size: var(--text-7xl); font-weight: 800; }
h2 { font-size: var(--text-5xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl); }
h6 { font-size: var(--text-lg); }

p {
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--text-secondary);
}

a {
  color: var(--clr-primary-light);
  text-decoration: none;
  transition: color var(--transition-sm);
}
a:hover { color: var(--clr-primary); }

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol { list-style: none; }

/* ─── Layout Utilities ───────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--container-pad);
}

.container--wide   { max-width: var(--container-wide); }
.container--narrow { max-width: var(--container-narrow); }

.section {
  padding-block: clamp(64px, 10vw, 140px);
  position: relative;
  overflow: hidden;
}

.section--sm { padding-block: clamp(40px, 6vw, 80px); }
.section--lg { padding-block: clamp(80px, 14vw, 180px); }

/* ─── Flex & Grid ────────────────────────────────────────────── */
.flex        { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between{ display: flex; align-items: center; justify-content: space-between; }
.flex-col    { display: flex; flex-direction: column; }
.flex-wrap   { flex-wrap: wrap; }
.gap-1  { gap: var(--space-1); }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }
.gap-10 { gap: var(--space-10); }
.gap-12 { gap: var(--space-12); }

.grid { display: grid; }
.grid-auto-sm { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-auto-md { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-auto-lg { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }

/* ─── Text Utilities ─────────────────────────────────────────── */
.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }
.text-gradient {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gradient-gold {
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.font-light  { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semi   { font-weight: 600; }
.font-bold   { font-weight: 700; }
.font-extra  { font-weight: 800; }

/* ─── Display Utilities ──────────────────────────────────────── */
.hidden    { display: none !important; }
.invisible { visibility: hidden; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ─── Section Header ─────────────────────────────────────────── */
.section-header {
  text-align: center;
  max-width: 780px;
  margin: 0 auto var(--space-16);
}

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-alt);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-primary-light);
  background: rgba(var(--clr-primary-rgb), 0.1);
  border: 1px solid rgba(var(--clr-primary-rgb), 0.2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-5);
}
.section-eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--gradient-primary);
  border-radius: 50%;
  animation: pulse 2s ease infinite;
}

.section-title {
  font-size: var(--text-5xl);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-5);
}

.section-subtitle {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  line-height: 1.75;
  max-width: 600px;
  margin: 0 auto;
}

/* ─── Gradient Border Wrapper ────────────────────────────────── */
.gradient-border {
  position: relative;
  border-radius: var(--radius-lg);
}
.gradient-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: var(--gradient-primary);
  z-index: -1;
  opacity: 0.4;
  transition: opacity var(--transition-md);
}
.gradient-border:hover::before { opacity: 0.8; }

/* ─── Accessibility ──────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--clr-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* ─── Scroll Progress Bar ────────────────────────────────────── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 0%;
  height: 3px;
  background: var(--gradient-primary);
  z-index: calc(var(--z-navbar) + 1);
  transition: width 80ms linear;
  box-shadow: 0 0 12px rgba(var(--clr-primary-rgb), 0.6);
}

/* ─── Floating Shapes (ambient) ──────────────────────────────── */
.ambient-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  will-change: transform;
  animation: floatShape 12s ease-in-out infinite;
}
.ambient-shape--1 {
  width: clamp(300px, 40vw, 600px);
  height: clamp(300px, 40vw, 600px);
  background: rgba(var(--clr-primary-rgb), 0.07);
  top: -15%; left: -10%;
  animation-delay: 0s;
}
.ambient-shape--2 {
  width: clamp(250px, 35vw, 500px);
  height: clamp(250px, 35vw, 500px);
  background: rgba(var(--clr-accent-rgb), 0.06);
  top: 20%; right: -10%;
  animation-delay: -4s;
}
.ambient-shape--3 {
  width: clamp(200px, 30vw, 400px);
  height: clamp(200px, 30vw, 400px);
  background: rgba(var(--clr-secondary-rgb), 0.05);
  bottom: -10%; left: 30%;
  animation-delay: -8s;
}