/* =========================================================
   Growth DNA AI — Core Tokens
   Import this file at the top of any HTML in this system.
   ========================================================= */

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

:root {
  /* ---------- Colors: the Void ---------- */
  --bg-void:          #08080C;
  --bg-surface:       #12121A;
  --bg-elevated:      #1A1A24;

  /* ---------- Colors: the Pulse ---------- */
  --ai-cyan:          #00F2FF;
  --human-purple:     #BC13FE;
  --growth-magenta:   #FF007A;

  /* Neon tints (for glows, soft fills) */
  --ai-cyan-15:       rgba(0, 242, 255, 0.15);
  --ai-cyan-45:       rgba(0, 242, 255, 0.45);
  --human-purple-15:  rgba(188, 19, 254, 0.15);
  --human-purple-55:  rgba(188, 19, 254, 0.55);
  --growth-magenta-20:rgba(255, 0, 122, 0.20);

  /* ---------- Text ---------- */
  --fg-primary:       #FFFFFF;
  --fg-secondary:     #94A3B8;
  --fg-tertiary:      #64748B;
  --fg-inverse:       #08080C; /* dark text on bright gradient buttons */

  /* ---------- Lines & glass ---------- */
  --line:             rgba(255, 255, 255, 0.10);
  --line-strong:      rgba(255, 255, 255, 0.18);
  --glass-fill:       rgba(255, 255, 255, 0.05);
  --glass-fill-hover: rgba(255, 255, 255, 0.08);

  /* ---------- Semantic surfaces ---------- */
  --surface-glass:    var(--glass-fill);
  --surface-card:     var(--bg-surface);
  --surface-menu:     var(--bg-elevated);

  /* ---------- Gradients ---------- */
  --pulse-gradient:     linear-gradient(135deg, var(--ai-cyan) 0%, var(--human-purple) 100%);
  --pulse-gradient-soft: linear-gradient(135deg, var(--ai-cyan-15) 0%, var(--human-purple-15) 100%);
  --growth-gradient:    linear-gradient(135deg, var(--human-purple) 0%, var(--growth-magenta) 100%);

  /* ---------- Typography: families ---------- */
  --font-display:  'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body:     'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Typography: scale (display) ---------- */
  --t-display-1:   clamp(48px, 7vw, 96px);  /* hero */
  --t-display-2:   clamp(40px, 5vw, 64px);  /* section hero */
  --t-h1:          40px;
  --t-h2:          32px;
  --t-h3:          24px;
  --t-h4:          20px;

  /* ---------- Typography: scale (body + ui) ---------- */
  --t-body-lg:     18px;
  --t-body:        16px;
  --t-body-sm:     14px;
  --t-caption:     13px;
  --t-micro:       12px;
  --t-mono-label:  12px;

  /* ---------- Line heights ---------- */
  --lh-tight:      1.05;
  --lh-snug:       1.2;
  --lh-normal:     1.5;
  --lh-relaxed:    1.65;

  /* ---------- Letter spacing ---------- */
  --ls-display:   -0.02em;   /* tight for big headlines */
  --ls-tight:     -0.01em;
  --ls-normal:    0;
  --ls-label:     0.1em;     /* mono uppercase labels */

  /* ---------- Spacing (4px base) ---------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10: 128px;

  /* ---------- Radii (intentionally small) ---------- */
  --r-sm:      4px;   /* buttons, inputs, pills */
  --r-md:      8px;   /* cards, panels */
  --r-lg:     12px;   /* modals, big sections */
  --r-pill:  999px;   /* pulse dot, avatar circle only */

  /* ---------- Shadows / glows ---------- */
  /* Outer neon glow on interactive elements */
  --glow-cyan:        0 0 24px -4px var(--ai-cyan-45);
  --glow-cyan-strong: 0 0 32px -2px var(--ai-cyan-45);
  --glow-purple:      0 0 24px -4px var(--human-purple-55);
  --glow-purple-strong: 0 0 32px -2px var(--human-purple-55);
  /* Inner hairline glow on hovered glass cards */
  --glow-inset-cyan:   inset 0 0 0 1px var(--ai-cyan-15);

  /* ---------- Motion ---------- */
  --ease-precise: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:     120ms;
  --dur-base:     220ms;
  --dur-slow:     600ms;

  /* ---------- Layout ---------- */
  --content-max:  1240px;
  --gutter:       48px;
  --nav-h:        64px;
}

/* =========================================================
   Base + semantic element styles
   ========================================================= */

html, body {
  background: var(--bg-void);
  color: var(--fg-primary);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headlines — Space Grotesk, tight tracking */
h1, .h1, .t-display-1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-display-1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--fg-primary);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
  margin: 0;
}

/* Body */
p, .p {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-secondary);
  margin: 0;
  text-wrap: pretty;
}
.p-lg { font-size: var(--t-body-lg); }
.p-sm { font-size: var(--t-body-sm); }

/* Mono label — the "coded" voice */
.label, .eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-mono-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-secondary);
}

/* Code */
code, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--ai-cyan);
  background: var(--glass-fill);
  padding: 2px 6px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
}

/* Links */
a {
  color: var(--fg-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  transition: color var(--dur-fast) var(--ease-precise),
              border-color var(--dur-fast) var(--ease-precise);
}
a:hover {
  color: var(--ai-cyan);
  border-bottom-color: var(--ai-cyan);
}

/* Focus ring */
:focus-visible {
  outline: 2px solid var(--ai-cyan);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Horizontal rule */
hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--space-6) 0;
}

/* Selection */
::selection {
  background: var(--ai-cyan);
  color: var(--bg-void);
}