/* ═══════════════════════════════════════════════════════════════
   IT BLOG — CSS Design System & Custom Properties
   Fonts: Outfit (headings), Inter (body), JetBrains Mono (code)
═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ─── CSS Custom Properties ─── */
:root {
  /* Brand Colors */
  --primary:        #4F46E5;
  --primary-light:  #818CF8;
  --primary-dark:   #3730A3;
  --primary-glow:   rgba(79, 70, 229, 0.35);
  --secondary:      #06B6D4;
  --secondary-light:#67E8F9;
  --secondary-dark: #0891B2;
  --accent:         #F59E0B;
  --accent-light:   #FCD34D;

  /* Semantic Colors */
  --success:        #10B981;
  --success-bg:     rgba(16,185,129,0.12);
  --error:          #EF4444;
  --error-bg:       rgba(239,68,68,0.12);
  --warning:        #F59E0B;
  --warning-bg:     rgba(245,158,11,0.12);
  --info:           #3B82F6;
  --info-bg:        rgba(59,130,246,0.12);

  /* Dark Mode Base (default) */
  --bg-base:        #0A0F1E;
  --bg-surface:     #0F172A;
  --bg-card:        #1E293B;
  --bg-card-hover:  #243144;
  --bg-elevated:    #263245;
  --bg-input:       #1A2540;

  /* Text */
  --text-primary:   #F1F5F9;
  --text-secondary: #94A3B8;
  --text-muted:     #64748B;
  --text-inverse:   #0F172A;

  /* Borders */
  --border:         rgba(99,109,143,0.2);
  --border-hover:   rgba(79,70,229,0.5);
  --border-focus:   #4F46E5;

  /* Gradients */
  --grad-primary:   linear-gradient(135deg, #4F46E5 0%, #06B6D4 100%);
  --grad-dark:      linear-gradient(135deg, #0A0F1E 0%, #1a1040 100%);
  --grad-card:      linear-gradient(135deg, rgba(79,70,229,0.08) 0%, rgba(6,182,212,0.05) 100%);
  --grad-hero:      linear-gradient(135deg, #0A0F1E 0%, #1a0f3a 40%, #0a1f3a 100%);
  --grad-cta:       linear-gradient(135deg, #4F46E5, #7C3AED);
  --grad-gold:      linear-gradient(135deg, #F59E0B, #D97706);
  --grad-success:   linear-gradient(135deg, #10B981, #059669);

  /* Glass Effect */
  --glass-bg:       rgba(30, 41, 59, 0.7);
  --glass-border:   rgba(255, 255, 255, 0.08);
  --glass-blur:     blur(16px);

  /* Shadows */
  --shadow-sm:      0 2px 8px rgba(0,0,0,0.3);
  --shadow-md:      0 4px 20px rgba(0,0,0,0.4);
  --shadow-lg:      0 8px 40px rgba(0,0,0,0.5);
  --shadow-xl:      0 16px 64px rgba(0,0,0,0.6);
  --shadow-glow:    0 0 30px rgba(79,70,229,0.3);
  --shadow-glow-cyan: 0 0 30px rgba(6,182,212,0.25);
  --shadow-card:    0 4px 24px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.05) inset;

  /* Spacing */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

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

  /* Typography */
  --font-heading: 'Outfit', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Font Sizes */
  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --text-4xl:   2.25rem;
  --text-5xl:   3rem;
  --text-6xl:   3.75rem;
  --text-7xl:   4.5rem;

  /* Z-index */
  --z-base:    1;
  --z-above:   10;
  --z-modal:   100;
  --z-nav:     200;
  --z-popup:   300;
  --z-toast:   400;
  --z-top:     500;

  /* Transitions */
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --ease-out:   cubic-bezier(0, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   150ms;
  --dur-base:   250ms;
  --dur-slow:   400ms;

  /* Container */
  --container-max: 1400px;
  --container-pad: clamp(16px, 4vw, 64px);

  /* Header Height — default to 108px (72px primary + 36px secondary-nav worst case).
     navbar.js will update this to 72px at runtime when secondary nav is absent. */
  --header-h: 108px;
}

/* ─── Light Mode Overrides ─── */
[data-theme="light"] {
  --bg-base:        #F8FAFC;
  --bg-surface:     #FFFFFF;
  --bg-card:        #FFFFFF;
  --bg-card-hover:  #F1F5F9;
  --bg-elevated:    #F1F5F9;
  --bg-input:       #F8FAFC;
  --text-primary:   #0F172A;
  --text-secondary: #475569;
  --text-muted:     #94A3B8;
  --text-inverse:   #FFFFFF;
  --border:         rgba(15,23,42,0.1);
  --border-hover:   rgba(79,70,229,0.4);
  --glass-bg:       rgba(255,255,255,0.8);
  --glass-border:   rgba(15,23,42,0.08);
  --shadow-sm:      0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:      0 4px 20px rgba(0,0,0,0.12);
  --shadow-lg:      0 8px 40px rgba(0,0,0,0.15);
  --shadow-xl:      0 16px 64px rgba(0,0,0,0.18);
  --shadow-card:    0 4px 24px rgba(0,0,0,0.08), 0 1px 0 rgba(0,0,0,0.04);
  --grad-dark:      linear-gradient(135deg, #E0E7FF 0%, #F0FDFB 100%);
  --grad-hero:      linear-gradient(135deg, #EEF2FF 0%, #E0F2FE 100%);
  --bg-input:       #F1F5F9;
}