/* ============================================================
   Zenna AI — Design Tokens
   ============================================================ */

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

:root {
  /* COLOR */
  --bg-void:       #1a0a33;
  --bg-deep:       #25104a;
  --bg-elevated:   #2d1559;
  --bg-raised:     #3a1f6e;

  --violet:        #9b30ff;
  --violet-700:    #7c1ae0;
  --violet-300:    #b56cff;
  --violet-100:    #d9b3ff;

  --lavender:      #c084fc;
  --lavender-300:  #d9b3ff;

  --fg:            #ffffff;
  --fg-soft:       #e2d9f3;
  --fg-muted:      #9b8fb8;
  --fg-faint:      #6b5d8c;

  --stroke:        rgba(155, 48, 255, 0.20);
  --stroke-strong: rgba(155, 48, 255, 0.45);
  --stroke-soft:   rgba(192, 132, 252, 0.12);

  --success:       #6ee7b7;
  --warning:       #fbbf77;
  --danger:        #ff6bb1;
  --info:          var(--lavender);

  /* TYPE */
  --font-display:  'Orbitron', system-ui, -apple-system, sans-serif;
  --font-body:     'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, monospace;

  --t-hero:    clamp(56px, 9vw, 120px);
  --t-display: clamp(40px, 6vw, 72px);
  --t-h1:      clamp(36px, 4.5vw, 56px);
  --t-h2:      clamp(28px, 3.5vw, 40px);
  --t-h3:      clamp(22px, 2.6vw, 28px);
  --t-h4:      20px;
  --t-body-lg: 20px;
  --t-body:    17px;
  --t-body-sm: 15px;
  --t-caption: 13px;
  --t-eyebrow: 12px;

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-normal:1.45;
  --lh-relaxed:1.6;

  --ls-tight:  -0.02em;
  --ls-eyebrow:0.18em;

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

  /* RADII */
  --r-xs:6px; --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px; --r-pill:999px;

  /* GLOW */
  --glow-sm:    0 0 12px rgba(155, 48, 255, 0.35);
  --glow-md:    0 0 24px rgba(155, 48, 255, 0.45);
  --glow-lg:    0 0 48px rgba(155, 48, 255, 0.55), 0 0 96px rgba(192, 132, 252, 0.25);
  --glow-xl:    0 0 80px rgba(155, 48, 255, 0.65), 0 0 160px rgba(192, 132, 252, 0.30);
  --glow-inner: inset 0 0 24px rgba(155, 48, 255, 0.08);
  --glow-text:  0 0 16px rgba(192, 132, 252, 0.55);

  /* EASING */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:150ms; --dur-base:250ms; --dur-slow:500ms;

  /* LAYOUT */
  --container: 1280px;
  --pad-x:     clamp(24px, 5vw, 96px);
  --section-y: clamp(64px, 10vw, 128px);

  --z-sticky:100; --z-modal:1000;
}

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

*:focus-visible {
  outline: 2px solid var(--lavender);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}