:root {
  /* =========================================
     1. Magoods Identity (Source of Truth)
     ========================================= */
  --magoods-primary: #007ea7;
  --magoods-secondary: #003459;
  --magoods-accent: #00a8e8;
  --magoods-success: #00d26a;
  --magoods-danger: #ff4f4f;
  
  --magoods-bg-dark: #00171f;
  --magoods-text-light: #e6f6ff;
  
  --magoods-surface: rgba(0, 30, 46, 0.95);
  --magoods-glow: rgba(0, 168, 232, 0.2);
  --magoods-border: rgba(0, 168, 232, 0.25);
  --magoods-glow-strong: rgba(0, 168, 232, 0.4);

  /* Fonts */
  --font-sans: "Inter", sans-serif;
  --font-display: "Orbitron", sans-serif;

  /* =========================================
     2. React Component Mapping (Tailwind Proxies)
     ========================================= */
  /* Base */
  --background: 200 100% 6%; /* #00171f approx in HSL */
  --foreground: 200 50% 95%; /* #e6f6ff approx */

  /* Primary (Mapped to Magoods Primary #007ea7 -> HSL 195 100% 33%) */
  --primary: 195 100% 33%;
  --primary-foreground: 0 0% 100%;

  /* Secondary (Mapped to Magoods Secondary #003459 -> HSL 205 100% 17%) */
  --secondary: 205 100% 17%;
  --secondary-foreground: 0 0% 100%;

  /* Accent (Mapped to Magoods Accent #00a8e8 -> HSL 197 100% 45%) */
  --accent: 197 100% 45%;
  --accent-foreground: 0 0% 100%;

  /* Destructive */
  --destructive: 0 100% 65%; /* #ff4f4f */
  --destructive-foreground: 0 0% 100%;

  /* Border & Input */
  --border: 195 100% 20%;
  --input: 195 100% 20%;
  --ring: 195 100% 33%;

  /* Radius */
  --radius: 0.5rem;
}