/* Postlain Cyberpunk 3D Mecha Design System */
:root {
  /* Color Palette: Void Black, Crimson Red, Chrome White */
  --bg-void: #040406;
  --bg-mecha: #09090d;
  --bg-plate: #111116;
  --bg-card: rgba(18, 18, 24, 0.85);
  --bg-card-hover: rgba(28, 28, 38, 0.95);
  --bg-overlay: rgba(4, 4, 6, 0.88);
  --bg-glass: rgba(14, 14, 20, 0.75);

  /* Cyberpunk Crimson Neon Accents */
  --red-neon: #ff003c;
  --red-laser: #ff1e27;
  --red-crimson: #e11d48;
  --red-glow: rgba(255, 0, 60, 0.5);
  --red-glow-subtle: rgba(255, 0, 60, 0.2);
  --red-dim: rgba(255, 0, 60, 0.1);
  --red-border: rgba(255, 0, 60, 0.45);

  /* Chrome White & Metallics */
  --white-pure: #ffffff;
  --chrome-white: #f8fafc;
  --chrome-light: #e2e8f0;
  --text-steel: #94a3b8;
  --text-dim: #52525b;
  --border-steel: rgba(255, 255, 255, 0.12);
  --border-subtle: rgba(255, 255, 255, 0.06);

  /* Status Colors */
  --status-online: #ff003c;
  --status-beta: #ffffff;
  --status-dev: #94a3b8;

  /* 3D Chamfer & Mechanical Clipping */
  --clip-corner-sm: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  --clip-corner-md: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  --clip-corner-lg: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
  --clip-corner-tab: polygon(14px 0, calc(100% - 14px) 0, 100% 100%, 0 100%);

  /* Shadows & Laser Glows */
  --shadow-3d: 0 20px 50px -10px rgba(0, 0, 0, 0.9), 0 0 30px -5px rgba(255, 0, 60, 0.25);
  --shadow-popup: 0 25px 70px -10px rgba(0, 0, 0, 0.95), 0 0 45px -5px rgba(255, 0, 60, 0.4);
  --laser-glow: 0 0 20px rgba(255, 0, 60, 0.6);
  --laser-glow-lg: 0 0 40px rgba(255, 0, 60, 0.8);
  --white-glow: 0 0 18px rgba(255, 255, 255, 0.4);

  /* Typography */
  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Transitions */
  --transition-3d: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.18s ease-out;
}