/* ============================================================
   PUMPSWAP CAT — design tokens
   Palette rule: ~90% black, ~8% white, ~2% green.
   Green is treated as LIGHT (glow, indicators, hairlines),
   never as a surface fill.
   ============================================================ */

:root {
  /* — surfaces — */
  --void:          #000000;
  --ink:           #050706;
  --panel:         #080B09;
  --panel-hi:      #0C110E;

  /* — emerald / neon (light only) — */
  --emerald-deep:  #04160C;
  --emerald:       #0C7A3B;
  --neon:          #22F05A;
  --neon-dim:      #14B843;
  --neon-glow:     rgba(34, 240, 90, 0.22);
  --neon-wash:     rgba(34, 240, 90, 0.06);

  /* — ink on dark — */
  --white:         #FFFFFF;
  --gold:          #E4C489;   /* warm accent, used sparingly */
  --smoke:         rgba(255, 255, 255, 0.60);
  --ash:           rgba(255, 255, 255, 0.36);
  --faint:         rgba(255, 255, 255, 0.16);

  /* — hairlines — */
  --line:          rgba(255, 255, 255, 0.10);
  --line-strong:   rgba(255, 255, 255, 0.22);
  --line-neon:     rgba(34, 240, 90, 0.34);

  /* — type — */
  --f-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-hero:  clamp(3.6rem, 14.5vw, 15rem);
  --t-mega:  clamp(2.6rem, 9.6vw, 10.5rem);
  --t-h2:    clamp(2.1rem, 5.6vw, 5.4rem);
  --t-h3:    clamp(1.4rem, 2.4vw, 2.2rem);
  --t-lede:  clamp(1.05rem, 1.5vw, 1.45rem);
  --t-body:  clamp(0.95rem, 1.05vw, 1.06rem);
  --t-micro: clamp(0.66rem, 0.78vw, 0.76rem);

  --track-micro: 0.28em;
  --track-tight: -0.035em;

  /* — layout — */
  --gut:   clamp(20px, 5vw, 72px);
  --maxw:  1680px;
  --band:  clamp(96px, 14vh, 200px);   /* vertical section rhythm */
  --navh:  72px;

  /* — motion — */
  --e-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --e-io:   cubic-bezier(0.65, 0, 0.35, 1);
  --e-mask: cubic-bezier(0.16, 1, 0.3, 1);
  --d-fast: 0.32s;
  --d-mid:  0.7s;
  --d-slow: 1.15s;

  --z-grain: 90;
  --z-nav:   70;
  --z-menu:  80;
  --z-osd:   60;
  --z-cursor: 100;
}

@media (max-width: 720px) {
  :root { --navh: 62px; }
}