/* ==========================================
   HYLEK DESIGN SYSTEM - METALLIC NIGHT TOKENS
   ========================================== */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&family=Space+Grotesk:wght@400;500;600;700;800&display=swap');

:root {
  /* Primary Metallic Night Color Palette */
  --color-bg-base: #030303;
  --color-bg-deep: #050505;
  --color-bg-surface: #090A0B;
  --color-bg-card: #111315;
  
  /* HYLEK Electric Yellow Accent */
  --color-accent-yellow: #F5FF00;
  --color-accent-yellow-rgb: 245, 255, 0;
  --color-accent-yellow-glow: rgba(245, 255, 0, 0.25);
  --color-accent-yellow-hover: #e3ec00;
  
  /* Metallic Silver & Neutral Text */
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #B8B8B8;
  --color-text-muted: rgba(255, 255, 255, 0.50);
  --color-text-dim: rgba(255, 255, 255, 0.35);
  
  /* Metallic Borders & Glows */
  --color-border-subtle: rgba(255, 255, 255, 0.10);
  --color-border-medium: rgba(255, 255, 255, 0.20);
  --color-border-yellow: #F5FF00;
  --color-rim-glow: rgba(255, 255, 255, 0.75);

  /* Typography */
  --font-family-primary: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family-handwritten: 'Caveat', cursive, sans-serif;

  /* Dimensions & Spacing */
  --container-max-width: 1360px;
  --nav-height: 84px;

  /* Animations & Transitions */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 200ms var(--ease-out-expo);
  --transition-normal: 400ms var(--ease-out-expo);
  --transition-slow: 700ms var(--ease-out-expo);

  /* Layering */
  --z-planet: 1;
  --z-content: 10;
  --z-nav: 100;
}