:root {
  /* Colors */
  --bg:           #0A0A0A;
  --surface:      #111111;
  --surface2:     #161616;
  --surface3:     #1c1c1c;
  --blue:         #0055FF;
  --blue-dim:     rgba(0, 85, 255, 0.12);
  --blue-glow:    rgba(0, 85, 255, 0.08);
  --gold:         #C9A84C;
  --gold-dim:     rgba(201, 168, 76, 0.12);
  --text:         #F0F0F0;
  --muted:        #555555;
  --muted-light:  #444444;
  --border:       rgba(255, 255, 255, 0.06);
  --border-light: rgba(255, 255, 255, 0.10);
  --error:        #ff4444;
  --success:      #C9A84C;

  /* Typography */
  --font-display: 'Array', 'Monument Extended', 'Oswald', sans-serif;
  --font-body:    'DM Mono', 'Courier New', monospace;

  /* Spacing */
  --nav-h:        64px;
  --section-pad:  clamp(80px, 10vw, 140px);
  --content-max:  1200px;
  --content-pad:  clamp(24px, 5vw, 80px);

  /* Transitions */
  --transition:        0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast:   0.2s ease;
  --ease-entrance:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-hover:        cubic-bezier(0.2, 0, 0, 1);
  --ease-exit:         cubic-bezier(0.4, 0, 1, 1);
  --ease-spring:       cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Border radius */
  --radius:       2px;
  --radius-sm:    1px;

  /* Z-Index scale — USE THESE ONLY, never invent z-index values */
  --z-base:        1;
  --z-nav:         100;
  --z-tooltip:     200;
  --z-mobile-menu: 500;
  --z-cursor:      900;
  --z-loader:      1000;

  /* Breakpoints (reference only — use in media queries) */
  --bp-mobile:    480px;
  --bp-tablet:    768px;
  --bp-desktop:   1024px;
  --bp-wide:      1440px;
}