/* ══════════════════════════════════════════════════════════
   TOKENS.CSS — PlugJolt Design Tokens
   Dark-dominant, volt-green accent palette
   ══════════════════════════════════════════════════════════ */

:root {
  /* ── COLOR PALETTE — Dark + Volt Green ── */
  --volt-green:      #00C853;
  --deep-teal:       #0D1F22;
  --nardo-gray:      #8E9492;
  --white:           #FFFFFF;
  --card-surface:    #142D31;
  --volt-green-hover: #00B848;
  --volt-green-10:   rgba(0, 200, 83, 0.10);
  --volt-green-20:   rgba(0, 200, 83, 0.20);
  --text-secondary:  rgba(255, 255, 255, 0.6);
  --text-tertiary:   rgba(255, 255, 255, 0.4);
  --border-subtle:   rgba(255, 255, 255, 0.08);
  --border-hover:    rgba(255, 255, 255, 0.15);
  --section-alt:     #0A181B;
  --section-lighter: #142D31;
  --light-surface:   #F8FAF9;

  /* ── TYPOGRAPHY ── */
  --font-display: system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-body:    system-ui, -apple-system, 'Helvetica Neue', sans-serif;

  --size-xs:      0.75rem;
  --size-sm:      0.875rem;
  --size-base:    1rem;
  --size-md:      1.125rem;
  --size-lg:      1.25rem;
  --size-xl:      1.5rem;
  --size-2xl:     2rem;
  --size-3xl:     2.5rem;
  --size-4xl:     3.5rem;
  --size-5xl:     5rem;
  --size-hero:    clamp(3.5rem, 8vw, 7rem);

  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  --leading-tight:   1.1;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  --tracking-tight:  -0.03em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;
  --tracking-wider:   0.15em;

  /* ── SPACING ── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;
  --space-40:  10rem;

  /* ── LAYOUT ── */
  --container:    1280px;
  --container-md: 960px;
  --container-sm: 720px;
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    16px;
  --radius-full:  9999px;

  /* ── ANIMATION ── */
  --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);
  --duration-fast:  200ms;
  --duration-base:  350ms;
  --duration-slow:  600ms;
  --duration-crawl: 1200ms;

  /* ── SEMANTIC STATE COLORS ── */
  --status-success: #059669;
  --status-error:   #DC2626;
  --status-warning: #D97706;

  /* ── SHADOWS ── */
  --shadow-sm:       0 1px 3px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.15);
  --shadow-md:       0 4px 16px rgba(0,0,0,0.25), 0 2px 6px rgba(0,0,0,0.15);
  --shadow-lg:       0 20px 48px rgba(0,0,0,0.3), 0 8px 16px rgba(0,0,0,0.2);
  --shadow-xl:       0 40px 80px rgba(0,0,0,0.35);
  --shadow-floating: 0 16px 48px rgba(0,0,0,0.3), 0 4px 12px rgba(0,0,0,0.2);
}