/* ==========================================================================
   DESIGN TOKENS - HITECH SOLAR SOLUTION
   ========================================================================== */

:root {
  /* Color Palette - Metallic Royal Gold & Dark Navy (From Official Logo) */
  --primary-orange: #D49B2A;          /* Royal Gold */
  --primary-orange-hover: #B8860B;    /* Darker Metallic Gold */
  --primary-orange-light: #FFF8E7;    /* Soft Gold Tint */
  --primary-yellow: #FCE081;          /* Gold Light Highlight */
  
  --secondary-navy: #0A192F;
  --secondary-navy-light: #112240;
  --secondary-navy-hover: #1D3557;
  
  --accent-green: #00C853;
  --accent-green-light: #E8F8F0;
  --accent-blue: #0088FF;
  --accent-blue-light: #E6F3FF;
  
  --text-dark: #1E293B;
  --text-muted: #64748B;
  --text-light: #94A3B8;
  --text-white: #FFFFFF;
  
  --bg-main: #FFFFFF;
  --bg-alt: #F8FAFC;
  --bg-card: #FFFFFF;
  --bg-dark: #0A192F;
  
  --border-color: #E2E8F0;
  --border-focus: #D49B2A;
  
  /* Metallic Gold Gradients */
  --gradient-primary: linear-gradient(135deg, #FCE081 0%, #DFAC42 40%, #B8860B 100%);
  --gradient-gold: linear-gradient(135deg, #FCE081 0%, #D49B2A 50%, #9A7209 100%);
  --gradient-navy: linear-gradient(135deg, #0A192F 0%, #1E3A8A 100%);
  --gradient-accent: linear-gradient(135deg, #00C853 0%, #00E676 100%);
  --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4));

  /* Typography */
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'DM Sans', sans-serif;

  /* Spacing Scale */
  --space-xs: 0.25rem;  /* 4px */
  --space-sm: 0.5rem;   /* 8px */
  --space-md: 1rem;     /* 16px */
  --space-lg: 1.5rem;   /* 24px */
  --space-xl: 2.5rem;   /* 40px */
  --space-xxl: 4rem;    /* 64px */
  --space-hero: 6rem;   /* 96px */

  /* Elevation / Shadows */
  --shadow-sm: 0 2px 4px rgba(10, 25, 47, 0.04);
  --shadow-md: 0 4px 12px rgba(10, 25, 47, 0.08);
  --shadow-lg: 0 10px 25px rgba(10, 25, 47, 0.12);
  --shadow-xl: 0 20px 40px rgba(10, 25, 47, 0.16);
  --shadow-orange: 0 8px 20px rgba(212, 155, 42, 0.3); /* Metallic Gold Shadow */
  --shadow-green: 0 8px 20px rgba(0, 200, 83, 0.25);

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 9999px;

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Z-Index Hierarchy */
  --z-sticky: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
}