/* ============================================
   Karthikeya Invisible Grills — MODERN DESIGN TOKENS
   Color System: Royal Blue + Vibrant Orange + Leaf Green (logo palette)
   ============================================ */

:root {
  /* ── BRAND PALETTE (From Karthikeya Logo) ── */
  --brand-navy-900: #061046;        /* Ultra Deep Navy */
  --brand-navy-800: #0A2080;        /* Deep Space Navy */
  --brand-navy-700: #0A2478;        /* Primary Navy (Bird Body/Ribbon) */
  --brand-navy-600: #0F3399;        /* Medium Navy */
  --brand-navy-500: #0158DD;        /* Lighter Navy */
  
  --brand-amber-600: #E56A00;       /* Dark Amber */
  --brand-amber-500: #FF8A00;       /* Vibrant Electric Amber (Logo Wings) */
  --brand-amber-400: #FFB020;       /* Bright Golden Amber */
  --brand-amber-300: #FFD27A;       /* Soft Gold */
  
  --brand-emerald-600: #3F9A0B;     /* Deep Emerald */
  --brand-emerald-500: #5DB200;     /* Vibrant Emerald Mint (Logo Building) */
  --brand-emerald-400: #8BD43C;     /* Light Mint */
  
  /* Semantic Tokens */
  --color-primary: #0A2478;
  --color-primary-dark: #061046;
  --color-primary-light: #0F3399;
  
  --color-accent: #FF8A00;
  --color-accent-dark: #E56A00;
  --color-accent-light: #FFB020;
  --color-accent-soft: rgba(255, 138, 0, 0.12);
  
  --color-success: #5DB200;
  --color-success-soft: rgba(93, 178, 0, 0.12);
  
  /* Neutrals & Surfaces */
  --color-white: #FFFFFF;
  --color-bg-light: #F8FAFC;
  --color-bg-card: #FFFFFF;
  --color-bg-alt: #F1F5F9;
  
  --color-text-main: #0F172A;
  --color-text-muted: #64748B;
  --color-text-light: #94A3B8;
  --color-text-white: #FFFFFF;
  
  --color-border: #E2E8F0;
  --color-border-hover: #CBD5E1;
  --color-border-glow: rgba(255, 138, 0, 0.25);
  
  /* Modern Gradients */
  --grad-primary: linear-gradient(135deg, #0A2080 0%, #0F3399 100%);
  --grad-hero: linear-gradient(135deg, rgba(6, 16, 70, 0.95) 0%, rgba(10, 32, 128, 0.85) 50%, rgba(6, 16, 70, 0.6) 100%);
  --grad-accent: linear-gradient(135deg, #FF8A00 0%, #FFB020 100%);
  --grad-accent-hover: linear-gradient(135deg, #E57A00 0%, #FFA21F 100%);
  --grad-emerald: linear-gradient(135deg, #3F9A0B 0%, #5DB200 100%);
  --grad-card-glow: linear-gradient(135deg, rgba(255, 138, 0, 0.08) 0%, rgba(93, 178, 0, 0.04) 100%);
  --grad-banner: linear-gradient(90deg, #061046 0%, #0A2478 40%, #0F3399 70%, #061046 100%);
  --grad-text-accent: linear-gradient(135deg, #FF8A00 0%, #FFD27A 100%);
  --grad-text-emerald: linear-gradient(135deg, #5DB200 0%, #8BD43C 100%);
  --grad-shine: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);

  /* Glassmorphism System */
  --glass-white: rgba(255, 255, 255, 0.85);
  --glass-white-hover: rgba(255, 255, 255, 0.98);
  --glass-dark: rgba(10, 32, 128, 0.75);
  --glass-dark-card: rgba(10, 36, 120, 0.65);
  --glass-border: rgba(255, 255, 255, 0.15);
  --glass-blur: blur(14px);
  --glass-blur-lg: blur(24px);

  /* Typography */
  --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Font Sizes */
  --fs-hero: clamp(2.2rem, 5.5vw, 3.8rem);
  --fs-h1: clamp(1.85rem, 4.2vw, 2.85rem);
  --fs-h2: clamp(1.6rem, 3.4vw, 2.35rem);
  --fs-h3: clamp(1.25rem, 2.4vw, 1.65rem);
  --fs-h4: 1.18rem;
  --fs-body-lg: 1.08rem;
  --fs-body: 0.96rem;
  --fs-small: 0.86rem;
  --fs-xs: 0.76rem;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --lh-tight: 1.2;
  --lh-normal: 1.6;
  --lh-relaxed: 1.8;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* Rounded Corners */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 3px rgba(10, 32, 128, 0.05);
  --shadow-sm: 0 4px 12px rgba(10, 32, 128, 0.06);
  --shadow-md: 0 8px 24px rgba(10, 32, 128, 0.08);
  --shadow-lg: 0 16px 40px rgba(10, 32, 128, 0.12);
  --shadow-xl: 0 24px 60px rgba(10, 32, 128, 0.16);
  --shadow-glow-amber: 0 8px 28px rgba(255, 138, 0, 0.35);
  --shadow-glow-emerald: 0 8px 28px rgba(93, 178, 0, 0.3);
  --shadow-glow-navy: 0 12px 35px rgba(10, 36, 120, 0.4);

  /* Layout */
  --container-max: 1240px;
  --container-padding: clamp(16px, 4vw, 32px);
  --section-padding: clamp(3.5rem, 7vw, 6rem);
  --header-height: 92px;
  --topbar-height: 40px;
  --header-total-height: calc(var(--topbar-height) + var(--header-height));

  /* Z-Index */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 999;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-float: 1100;

  /* Animation Timings */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.2s;
  --dur-med: 0.35s;
  --dur-slow: 0.6s;
}