/* ==========================================================================
   VARIABLES & THEMING — Piresh Jain & Co. (2030 EDITION)
   ========================================================================== */

:root {
  /* ── Brand Colors (Updated to Client Palette) ───────────────────────── */
  --brand-50:  #f0f9fd;
  --brand-100: #e0f3fb;
  --brand-200: #cdeaf3;  /* Brand Light */
  --brand-300: #a8ddf0;
  --brand-400: #57ace7;  /* Brand Primary */
  --brand-500: #3a9ad9;
  --brand-600: #2b7db8;
  --brand-700: #236396;
  --brand-800: #1c4f78;
  --brand-900: #143b5a;
  --brand-950: #0d2638;

  /* ── Accent / Cyan (Futuristic Touch) ────────────────────────────────── */
  --accent-cyan-400: #22d3ee;
  --accent-cyan-500: #06b6d4;
  --accent-cyan-600: #0891b2;

  /* ── Accent / Gold (Trust & Premium) ─────────────────────────────────── */
  --accent-gold-400: #fbbf24;
  --accent-gold-500: #f59e0b;
  --accent-gold-600: #d97706;

  /* ── Semantic Colors ─────────────────────────────────────────────────── */
  --success:   #10b981;
  --warning:   #f59e0b;
  --error:     #ef4444;
  --info:      #3b82f6;

  /* ── Gradients ──────────────────────────────────────────────────────── */
  --bg-light-gradient: linear-gradient(135deg, #f0f9fd 0%, #cdeaf3 50%, #a8ddf0 100%);
  --bg-dark-gradient: linear-gradient(135deg, #020510 0%, #0d2638 50%, #1c4f78 100%);

  /* ── Typography ──────────────────────────────────────────────────────── */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* Enhanced fluid typography scale */
  --fs-xs:   clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem);
  --fs-sm:   clamp(0.825rem, 0.77rem + 0.275vw, 0.95rem);
  --fs-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --fs-md:   clamp(1.125rem, 1.05rem + 0.375vw, 1.35rem);
  --fs-lg:   clamp(1.35rem, 1.2rem + 0.75vw, 1.75rem);
  --fs-xl:   clamp(1.75rem, 1.4rem + 1.75vw, 2.5rem);
  --fs-2xl:  clamp(2.25rem, 1.7rem + 2.75vw, 3.5rem);
  --fs-3xl:  clamp(2.75rem, 2rem + 3.75vw, 4.5rem);
  --fs-4xl:  clamp(3.5rem, 2.5rem + 5vw, 6rem);
  --fs-hero: clamp(4rem, 3rem + 5vw, 7.5rem);

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

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

  --ls-tight:  -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-wider:   0.08em;

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

  /* ── Radius ──────────────────────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-3xl:  40px;
  --radius-full: 9999px;

  /* ── Shadows ─────────────────────────────────────────────────────────── */
  --shadow-xs:   0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.10);
  --shadow-xl:   0 16px 48px rgba(0,0,0,0.12);
  --shadow-2xl:  0 24px 64px rgba(0,0,0,0.16);
  --shadow-glow: 0 0 40px rgba(27,95,192,0.15);

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1200px;
  --container-2xl: 1400px;
  --container-max: 1600px;

  --navbar-height: 80px;

  /* ── Transitions ─────────────────────────────────────────────────────── */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:  cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   500ms;
  --duration-slower: 800ms;

  /* ── Z-Index Scale (FIXED FOR MOBILE MENU) ───────────────────────────── */
  --z-base:      1;
  --z-dropdown:  100;
  --z-sticky:    200;

  /* CRITICAL FIX: Navbar must be higher than overlay/menu to keep toggle clickable */
  --z-overlay:   900;  /* Mobile Menu Background */
  --z-navbar:    1000; /* Header Bar & Toggle Button */
  --z-modal:     1100;
  --z-toast:     1200;
  --z-tooltip:   1300;
}

/* ==========================================================================
   LIGHT THEME (Default)
   ========================================================================== */
[data-theme="light"],
:root {
  --bg-primary:    #ffffff;
  --bg-secondary:  #f6f8fc;
  --bg-tertiary:   #edf1f7;
  --bg-elevated:   #ffffff;
  --bg-overlay:    rgba(0, 0, 0, 0.5);

  --text-primary:   #0d2638;
  --text-secondary: #1c4f78;
  --text-tertiary:  #475569;
  --text-inverse:   #ffffff;
  --text-link:      var(--brand-500);
  --text-link-hover: var(--brand-700);

  --border-light:   #e2e8f0;
  --border-medium:  #cbd5e1;
  --border-heavy:   #94a3b8;

  /* Glass */
  --glass-bg:      rgba(255, 255, 255, 0.85); /* Slightly more opaque for menu */
  --glass-border:  rgba(255, 255, 255, 0.4);
  --glass-shadow:  rgba(0, 0, 0, 0.06);
  --glass-blur:    20px;

  /* Gradients */
  --gradient-brand:   linear-gradient(135deg, #1b5fc0 0%, #0f3d85 100%);
  --gradient-brand-vivid: linear-gradient(135deg, #57ace7 0%, #3a9ad9 50%, #2b7db8 100%);
  --gradient-hero:    var(--bg-light-gradient);
  --gradient-subtle:  linear-gradient(135deg, #f6f8fc 0%, #e8f1fc 100%);
  --gradient-card:    linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(246,248,252,0.9) 100%);
  --gradient-accent:  linear-gradient(135deg, #c19530 0%, #d4a843 100%);
  --gradient-surface: linear-gradient(180deg, #ffffff 0%, #f6f8fc 100%);

  /* Navbar */
  --navbar-bg:       rgba(255, 255, 255, 0.85);
  --navbar-border:   rgba(226, 232, 240, 0.6);
  --navbar-shadow:   0 1px 3px rgba(0, 0, 0, 0.05);

  /* Card */
  --card-bg:         #ffffff;
  --card-border:     #e2e8f0;
  --card-hover-shadow: 0 12px 40px rgba(27, 95, 192, 0.12);

  /* Input */
  --input-bg:        #ffffff;
  --input-border:    #cbd5e1;
  --input-focus:     var(--brand-500);

  /* CTA */
  --cta-gradient:    linear-gradient(135deg, #1b5fc0 0%, #164fa3 100%);
}

/* ==========================================================================
   DARK THEME
   ========================================================================== */
[data-theme="dark"] {
  --bg-primary:    #0a0f1e;
  --bg-secondary:  #0d2638;
  --bg-tertiary:   #143b5a;
  --bg-elevated:   #1c4f78;
  --bg-overlay:    rgba(0, 0, 0, 0.75);
  --bg-mesh:       radial-gradient(at 0% 0%, rgba(87, 172, 231, 0.12) 0%, transparent 50%),
                   radial-gradient(at 100% 100%, rgba(205, 234, 243, 0.08) 0%, transparent 50%);

  --text-primary:   #ffffff;
  --text-secondary: #cdeaf3;
  --text-tertiary:  #a8ddf0;
  --text-inverse:   #0d2638;
  --text-link:      var(--brand-200);
  --text-link-hover: var(--brand-100);

  --border-light:   rgba(87, 172, 231, 0.2);
  --border-medium:  rgba(87, 172, 231, 0.3);
  --border-heavy:   rgba(87, 172, 231, 0.5);
  --border-glass:   rgba(87, 172, 231, 0.25);

  /* Premium Glassmorphism (Dark) */
  --glass-bg:      rgba(13, 38, 56, 0.85);
  --glass-bg-strong: rgba(13, 38, 56, 0.95);
  --glass-border:  rgba(87, 172, 231, 0.3);
  --glass-shadow:  rgba(0, 0, 0, 0.4);
  --glass-blur:    28px;
  --glass-blur-strong: 48px;

  /* Advanced Gradients (Dark) */
  --gradient-brand:   linear-gradient(135deg, #57ace7 0%, #3a9ad9 50%, #2b7db8 100%);
  --gradient-brand-vivid: linear-gradient(135deg, #57ace7 0%, #3a9ad9 50%, #2b7db8 100%);
  --gradient-hero:    var(--bg-dark-gradient);
  --gradient-hero-mesh: linear-gradient(135deg, #020510 0%, #0d2638 50%, #1c4f78 100%),
                        radial-gradient(ellipse at 20% 30%, rgba(87, 172, 231, 0.15) 0%, transparent 50%),
                        radial-gradient(ellipse at 80% 70%, rgba(205, 234, 243, 0.1) 0%, transparent 50%);
  --gradient-subtle:  linear-gradient(135deg, #0d2638 0%, #0a0f1e 100%);
  --gradient-card:    linear-gradient(180deg, rgba(28,79,120,0.7) 0%, rgba(13,38,56,0.6) 100%);
  --gradient-accent-cyan:  linear-gradient(135deg, #57ace7 0%, #cdeaf3 100%);
  --gradient-accent-gold:  linear-gradient(135deg, #d97706 0%, #fbbf24 100%);
  --gradient-surface: linear-gradient(180deg, #1c4f78 0%, #0d2638 100%);
  --gradient-mesh: radial-gradient(at 0% 0%, rgba(87, 172, 231, 0.15) 0%, transparent 50%),
                   radial-gradient(at 100% 0%, rgba(205, 234, 243, 0.1) 0%, transparent 50%),
                   radial-gradient(at 100% 100%, rgba(87, 172, 231, 0.12) 0%, transparent 50%),
                   radial-gradient(at 0% 100%, rgba(251, 191, 36, 0.05) 0%, transparent 50%);

  /* Navbar */
  --navbar-bg:       rgba(10, 15, 30, 0.85);
  --navbar-bg-scrolled: rgba(10, 15, 30, 0.95);
  --navbar-border:   rgba(87, 172, 231, 0.25);
  --navbar-shadow:   0 1px 3px rgba(0, 0, 0, 0.3);
  --navbar-shadow-scrolled: 0 4px 16px rgba(0, 0, 0, 0.4);

  /* Card */
  --card-bg:         rgba(28, 79, 120, 0.6);
  --card-bg-glass:   rgba(13, 38, 56, 0.5);
  --card-border:     rgba(87, 172, 231, 0.3);
  --card-hover-shadow: 0 20px 60px rgba(87, 172, 231, 0.25), 0 8px 24px rgba(0, 0, 0, 0.4);

  /* Input */
  --input-bg:        rgba(28, 79, 120, 0.6);
  --input-border:    rgba(87, 172, 231, 0.3);
  --input-focus:     var(--brand-400);
  --input-glow:      0 0 0 3px rgba(87, 172, 231, 0.2);

  /* Shadows */
  --shadow-xs:   0 1px 2px rgba(0,0,0,0.2);
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.25);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.4), 0 4px 8px rgba(0,0,0,0.3);
  --shadow-xl:   0 16px 48px rgba(0,0,0,0.45), 0 8px 16px rgba(0,0,0,0.35);
  --shadow-2xl:  0 24px 64px rgba(0,0,0,0.5), 0 12px 24px rgba(0,0,0,0.4);
  --shadow-glow: 0 0 40px rgba(87, 172, 231, 0.3), 0 0 80px rgba(87, 172, 231, 0.15);
  --shadow-glow-strong: 0 0 60px rgba(87, 172, 231, 0.4), 0 0 120px rgba(87, 172, 231, 0.2);
  --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.3);
  --shadow-float: 0 20px 60px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-premium: 0 32px 96px rgba(0, 0, 0, 0.5), 0 16px 48px rgba(0, 0, 0, 0.4);

  /* CTA */
  --cta-gradient:  linear-gradient(135deg, #57ace7 0%, #3a9ad9 100%);
  --cta-glow:      0 0 50px rgba(87, 172, 231, 0.4);

  /* Texture */
  --noise-texture: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
}