@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300..800&family=Sora:wght@400..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap'); /* Fallback for Holiday signature */

@font-face {
  font-family: 'Holiday';
  src: url('../fonts/holiday.woff2') format('woff2'),
       url('../fonts/holiday.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ══════════════════════════════════════════════
     CORE PALETTE (Base Tokens)
  ══════════════════════════════════════════════ */
  --clr-white: #FFFFFF;
  --clr-cream: #FAFAFA;
  --clr-cream-subtle: #F3F4F6;
  --clr-black: #0A0A0A;
  --clr-void: #050505;
  --clr-surface-dark-1: #111111;
  --clr-surface-dark-2: #1A1A1A;
  
  --clr-gray-50: #F8FAFC;
  --clr-gray-100: #F1F5F9;
  --clr-gray-200: #E2E8F0;
  --clr-gray-400: #94A3B8;
  --clr-gray-500: #64748B;
  --clr-gray-800: #1E293B;
  --clr-gray-900: #0F172A;
  
  /* Modern Tech Accents - UPPED Luminosity for Visibility */
  --clr-accent-primary: #3B82F6; /* Brighter Cobalt */
  --clr-accent-violet: #60A5FA;  /* Sky Blue instead of deep blue */
  --clr-accent-cyan: #22D3EE;    /* Electric Cyan */
  
  --clr-gold: #F59E0B;
  --clr-emerald: #10B981;

  /* ══════════════════════════════════════════════
     GRADIENT SYSTEM (2025 Trend + Mixed Palette)
  ══════════════════════════════════════════════ */
  --gradient-hero: radial-gradient(circle at 50% 0%, #111827 0%, #050505 80%);
  --gradient-accent: linear-gradient(135deg, var(--clr-accent-violet), var(--clr-accent-primary), var(--clr-accent-cyan));
  --gradient-cta: linear-gradient(135deg, #1E3A8A, #2563EB 50%, #3B82F6);
  --gradient-mesh-dark: radial-gradient(circle at center, rgba(37, 99, 235, 0.1) 0%, transparent 70%);
  --gradient-mesh-light: radial-gradient(circle at center, rgba(37, 99, 235, 0.05) 0%, transparent 70%);

  /* ══════════════════════════════════════════════
     TYPOGRAPHY (Geist + Sora)
  ══════════════════════════════════════════════ */
  --ff-sans: 'Geist', system-ui, -apple-system, sans-serif;
  --ff-head: 'Sora', var(--ff-sans);

  --fs-xs:   clamp(0.75rem, 1vw, 0.8125rem);
  --fs-sm:   clamp(0.875rem, 1.2vw, 0.9375rem);
  --fs-base: clamp(1rem, 1.2vw, 1.125rem);
  --fs-lg:   clamp(1.125rem, 1.5vw, 1.25rem);
  --fs-xl:   clamp(1.25rem, 2vw, 1.5rem);
  --fs-2xl:  clamp(1.5rem, 2.5vw, 2rem);
  --fs-3xl:  clamp(2rem, 3.5vw, 2.75rem);
  --fs-4xl:  clamp(2.5rem, 5vw, 3.5rem);
  --fs-5xl:  clamp(3rem, 6vw, 4.5rem); 
  --fs-display: clamp(3.5rem, 8vw, 6.5rem); /* Massive hero impact */

  /* ══════════════════════════════════════════════
     Z-INDEX SYSTEM
  ══════════════════════════════════════════════ */
  --z-base: 1;
  --z-above: 10;
  --z-sticky: 1000;
  --z-modal: 9000;
  --z-tooltip: 10000;

  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --lh-tight: 1.1;
  --lh-base: 1.6;
  --lh-relaxed: 1.8;

  /* ══════════════════════════════════════════════
     SPACING & RADIUS
  ══════════════════════════════════════════════ */
  --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;    --sp-40: 10rem;
  --sp-mobile-section: clamp(4rem, 10vw, 8rem);

  --r-sm: 0.375rem; --r-md: 0.5rem; --r-lg: 0.75rem; --r-xl: 1.5rem; --r-2xl: 2rem; --r-full: 9999px;

  /* ══════════════════════════════════════════════
     SHADOWS & EFFECTS
  ══════════════════════════════════════════════ */
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -1px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
  --shadow-xl: 0 25px 50px -12px rgba(0,0,0,0.25);
  --shadow-glow: 0 0 30px rgba(37, 99, 235, 0.15);
  
  --glass-blur: 24px;
  --glass-border-light: rgba(255, 255, 255, 0.08);
  --glass-border-dark: rgba(0, 0, 0, 0.08);

  --t-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --t-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  --t-spring: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* ══════════════════════════════════════════════
     DEFAULT MODE (LIGHT LAYER)
  ══════════════════════════════════════════════ */
  --clr-bg: var(--clr-cream);
  --clr-bg-alt: var(--clr-white);
  --clr-surface: var(--clr-white);
  --clr-text: var(--clr-gray-800);
  --clr-text-muted: var(--clr-gray-500);
  --clr-text-faint: var(--clr-gray-400);
  --clr-heading: var(--clr-gray-900);
  --clr-accent: var(--clr-accent-primary);
  --clr-border: rgba(0, 0, 0, 0.08);
  --clr-border-glow: rgba(37, 99, 235, 0.2);
  
  --dot-pattern: radial-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px);

  /* ══════════════════════════════════════════════
     INFINITY DESIGN SYSTEM (Luxury Overhaul)
  ══════════════════════════════════════════════ */
  --inf-bg: #000000;
  --inf-surface: #0a0a0b;
  --inf-surface-2: #121214;
  --inf-surface-3: #1a1a1c;
  
  --inf-border: rgba(255, 255, 255, 0.06);
  --inf-border-strong: rgba(255, 255, 255, 0.12);
  --inf-inner-glow: inset 0 1px 1px rgba(255, 255, 255, 0.05);
  
  --inf-text-primary: #ffffff;
  --inf-text-secondary: #a1a1aa;
  --inf-text-muted: #71717a;
  
  --inf-accent: #3b82f6;
  --inf-accent-glow: 0 0 20px rgba(59, 130, 246, 0.25);
  
  --inf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --inf-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --inf-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.7), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --inf-shadow-xl: 0 35px 60px -15px rgba(0, 0, 0, 0.9);
}

/* ══════════════════════════════════════════════
   SECTION MODE OVERRIDES (MIXED PALETTE)
══════════════════════════════════════════════ */

.mode-dark {
  --clr-bg: var(--clr-void);
  --clr-bg-alt: var(--clr-surface-dark-1);
  --clr-surface: var(--clr-surface-dark-2);
  --clr-text: #D1D5DB; /* Gray-300 */
  --clr-text-muted: #9CA3AF; /* Gray-400 */
  --clr-text-faint: #6B7280; /* Gray-500 */
  --clr-heading: var(--clr-white);
  --clr-accent: var(--clr-accent-cyan);
  --clr-border: rgba(255, 255, 255, 0.1);
  --clr-border-glow: rgba(37, 99, 235, 0.4);
  --dot-pattern: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  
  background: var(--clr-bg);
  color: var(--clr-text);
}

/* Ensure navbar also goes dark when parent is mode-dark or doc-root is theme-midnight */
.mode-dark .navbar, .theme-midnight .navbar {
  background: rgba(5, 5, 10, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--clr-white) !important;
}

.mode-dark .navbar__link, .theme-midnight .navbar__link {
  color: rgba(255, 255, 255, 0.7);
}

.mode-dark .navbar__link:hover, .theme-midnight .navbar__link:hover {
  color: var(--clr-white);
}

.mode-gradient {
  background: var(--gradient-hero);
  color: var(--clr-white);
  --clr-heading: var(--clr-white);
  --clr-text: #D1D5DB;
  --clr-text-muted: #9CA3AF;
  --clr-border: rgba(255,255,255,0.1);
}

/* ══════════════════════════════════════════════
   UTILITIES
══════════════════════════════════════════════ */
.container { width: min(100% - 2rem, 1280px); margin-inline: auto; padding-inline: var(--sp-4); }
.container-tight { width: min(100% - 2rem, 800px); padding-inline: var(--sp-4); margin-inline: auto; }

body {
  font-family: var(--ff-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--clr-text);
  background: var(--clr-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 { 
  font-family: var(--ff-head); 
  color: var(--clr-heading); 
  line-height: var(--lh-tight); 
  font-weight: var(--fw-bold); 
  letter-spacing: -0.02em;
}

a { color: inherit; text-decoration: none; transition: color var(--t-fast); }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
img { max-width: 100%; height: auto; display: block; object-fit: cover; }

.font-signature {
  font-family: 'Holiday', 'Great Vibes', cursive !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

/* ══════════════════════════════════════════════
   SCROLLBAR & SELECTION
══════════════════════════════════════════════ */
::selection { background: var(--clr-accent-primary); color: var(--clr-white); }
::-webkit-scrollbar { width: 8px; background: var(--clr-bg); }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.02); }
.mode-dark::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.02); }
::-webkit-scrollbar-thumb { background: var(--clr-border); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: var(--clr-text-muted); }