/* ============================================================
   TOKENS.CSS — Design tokens & CSS custom properties
   Methodology: CSS Custom Properties + BEM naming
   ============================================================ */

:root {
  /* Colors */
  --color-black:        #0a0a0a;
  --color-black-soft:   #111111;
  --color-black-card:   #161616;
  --color-white:        #f5f5f0;
  --color-silver:       #c8c8b8;
  --color-silver-dim:   rgba(200, 200, 184, 0.45);
  --color-green:        #00e64d;
  --color-green-dark:   #00b33c;
  --color-green-glow:   rgba(0, 230, 77, 0.12);
  --color-green-border: rgba(0, 230, 77, 0.3);
  --color-border:       rgba(255, 255, 255, 0.07);
  --color-border-hover: rgba(0, 230, 77, 0.4);
  --color-overlay:      rgba(10, 10, 10, 0.75);
  --color-overlay-heavy:rgba(10, 10, 10, 0.88);

  /* Typography */
  --font-display: 'Bebas Neue', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'Space Mono', monospace;

  /* Font sizes */
  --fs-hero:    clamp(72px, 14vw, 160px);
  --fs-h1:      clamp(48px, 8vw, 96px);
  --fs-h2:      clamp(32px, 5vw, 56px);
  --fs-h3:      22px;
  --fs-body:    17px;
  --fs-small:   14px;
  --fs-label:   11px;
  --fs-mono:    13px;

  /* Spacing */
  --space-xs:   8px;
  --space-sm:   16px;
  --space-md:   24px;
  --space-lg:   40px;
  --space-xl:   64px;
  --space-2xl:  100px;

  /* Layout */
  --max-width:  1200px;
  --radius-sm:  2px;
  --radius-md:  4px;

  /* Transitions */
  --transition-fast:   0.15s ease;
  --transition-base:   0.2s ease;
  --transition-slow:   0.7s ease;

  /* Z-index layers */
  --z-base:    0;
  --z-above:   10;
  --z-nav:     1001;
  --z-ticker:  1000;
}