/* ============================================================
   NEYON ANGELS — Design Token CSS
   Chromatic palette · Orbitron / Raleway / Inter type scale
   ============================================================ */

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

/* ── Raw Color Primitives ─────────────────────────────────── */
:root {
  --na-mint-green:      #7CFFC6;
  --na-neon-mint:       #3DFFB0;
  --na-cosmic-blue:     #2AA8FF;
  --na-electric-purple: #A66CFF;
  --na-neon-pink:       #FF5ACD;
  --na-white:           #FFFFFF;
  --na-soft-off-white:  #F5F5F2;
  --na-deep-black:      #0B0B0B;
  --na-dark-slate:      #1A1A1F;
  --na-slate-elevated:  #24242C;

  /* Tints (primary brand: neon mint) */
  --na-brand-10: rgba(61, 255, 176, 0.10);
  --na-brand-20: rgba(61, 255, 176, 0.20);
  --na-mint-soft-30: rgba(124, 255, 198, 0.30);
  --na-mint-pale-45: rgba(124, 255, 198, 0.45);

  /* ── Semantic Surface Tokens ─────────────────────────────── */
  --color-bg:           var(--na-white);
  --color-bg-subtle:    var(--na-soft-off-white);
  --color-bg-elevated:  #E2F8EF;
  --color-bg-inverse:   var(--na-deep-black);
  --color-bg-brand:     var(--na-neon-mint);

  --color-fg:           var(--na-deep-black);
  --color-fg-2:         var(--na-slate-elevated);
  --color-fg-3:         #55555E;
  --color-fg-muted:     #78787F;
  --color-fg-inverse:   var(--na-white);
  --color-fg-brand:     var(--na-neon-mint);

  --color-border:       #C8EBDD;
  --color-border-brand: var(--na-neon-mint);
  --color-border-hover: var(--na-cosmic-blue);

  --color-accent:       var(--na-neon-mint);
  --color-accent-soft:  var(--na-cosmic-blue);
  --color-accent-pale:  var(--na-mint-green);

  /* ── Typography Scale ────────────────────────────────────── */
  --font-display:   'Orbitron', sans-serif;
  --font-heading:   'Orbitron', sans-serif;
  --font-subhead:   'Raleway', sans-serif;
  --font-body:      'Inter', sans-serif;
  --font-mono:      'Courier New', monospace;

  --text-display:      clamp(3rem, 6vw, 5.5rem);
  --text-h1:           clamp(2rem, 4vw, 3.5rem);
  --text-h2:           clamp(1.5rem, 2.5vw, 2.25rem);
  --text-h3:           clamp(1.125rem, 2vw, 1.5rem);
  --text-subhead:      1.125rem;
  --text-body-lg:      1.125rem;
  --text-body:         1rem;
  --text-body-sm:      0.875rem;
  --text-caption:      0.75rem;
  --text-button:       0.875rem;
  --text-label:        0.6875rem;

  --leading-tight:     1.1;
  --leading-snug:      1.3;
  --leading-normal:    1.6;
  --leading-loose:     1.8;

  --tracking-display:  0.12em;
  --tracking-wide:     0.08em;
  --tracking-normal:   0.02em;
  --tracking-tight:    0;

  --weight-regular:    400;
  --weight-medium:     500;
  --weight-semibold:   600;
  --weight-bold:       700;
  --weight-black:      800;

  /* ── 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-16:   64px;
  --space-20:   80px;
  --space-24:   96px;
  --space-32:   128px;

  /* ── Radius ──────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* ── Shadow / Glow ───────────────────────────────────────── */
  --shadow-sm:   0 1px 4px rgba(61, 255, 176, 0.10);
  --shadow-md:   0 4px 20px rgba(61, 255, 176, 0.14);
  --shadow-lg:   0 8px 40px rgba(61, 255, 176, 0.22);
  --glow-brand:  0 0 32px rgba(61, 255, 176, 0.35);
  --glow-soft:   0 0 60px rgba(42, 168, 255, 0.22);

  /* ── Transitions ─────────────────────────────────────────── */
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:   250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Semantic Element Defaults ───────────────────────────── */
.na-display {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  text-transform: uppercase;
  color: var(--color-fg);
}

.na-h1 {
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-tight);
  text-transform: uppercase;
  color: var(--color-fg);
}

.na-h2 {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-snug);
  text-transform: uppercase;
  color: var(--color-fg);
}

.na-h3 {
  font-family: var(--font-subhead);
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-snug);
  color: var(--color-fg);
}

.na-subhead {
  font-family: var(--font-subhead);
  font-size: var(--text-subhead);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-fg-brand);
}

.na-body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-fg-2);
}

.na-body-lg {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-fg-2);
}

.na-caption {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-fg-muted);
}

.na-button-text {
  font-family: var(--font-subhead);
  font-size: var(--text-button);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}