@tailwind base;
@tailwind components;
@tailwind utilities;

/* --- THEME VARIABLES (DARK/LIGHT MODE) --- */
:root {
  /* Dark Mode (Default) */
  --bg-primary: #050505;
  --bg-secondary: #0a0a0a;
  --bg-tertiary: #111111;
  --bg-card: rgba(5, 5, 5, 0.8);
  --bg-card-hover: rgba(10, 10, 10, 0.9);
  --bg-gradient-start: rgba(26, 18, 0, 0.8);
  --bg-gradient-end: rgba(0, 0, 0, 0.9);
  
  --text-primary: #ffffff;
  --text-secondary: #d1d5db;
  --text-muted: #9ca3af;
  --text-inverse: #111827;
  
  /* Heading Hierarchy */
  --heading-primary: #ffffff;
  --heading-secondary: rgba(255, 255, 255, 0.9);
  --heading-tertiary: rgba(255, 255, 255, 0.8);
  
  --border-primary: rgba(255, 255, 255, 0.1);
  --border-secondary: rgba(255, 255, 255, 0.05);
  --loader-bg: #050505;
  --border-hover: rgba(255, 255, 255, 0.2);
  
  --accent-primary: #FBBF24;
  --accent-secondary: #F59E0B;
  --accent-dark: #D97706;
  
  --nav-text: #ffffff;
  
  /* Button States */
  --button-primary-bg: #FBBF24;
  --button-primary-text: #000000;
  --button-primary-hover: #F59E0B;
  --button-secondary-bg: rgba(255, 255, 255, 0.1);
  --button-secondary-text: #ffffff;
  --button-secondary-hover: rgba(255, 255, 255, 0.2);
  
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.8);
  --shadow-glow: 0 0 20px rgba(251, 191, 36, 0.3);
  
  --shadow-adaptive: var(--shadow-xl);
  --bg-noise-opacity: 0.05;
  --bg-overlay: rgba(0, 0, 0, 0.8);
  --blend-mode-background: screen;

  /* Extended Palette - Text Hierarchy */
  --text-tertiary: #9ca3af; /* gray-400 */
  --text-quaternary: #6b7280; /* gray-500 */
  
  /* Extended Palette - Surface Backgrounds */
  --bg-surface: rgba(255, 255, 255, 0.02); /* white/5 equivalent */
  --bg-surface-hover: rgba(255, 255, 255, 0.05);
  --bg-surface-active: rgba(255, 255, 255, 0.1);
  
  /* Vertical Spacing Scale */
  --section-spacing-mobile: 4rem; /* py-16 */
  --section-spacing-desktop: 8rem; /* py-32 */
}

:root.light {
  /* Light Mode - Optimized for Professional Readability */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F8F9FA;
  --bg-tertiary: #F1F3F5;
  --bg-card: rgba(255, 255, 255, 0.98);
  --bg-card-hover: #FFFFFF;
  --bg-gradient-start: rgba(248, 249, 250, 0.95);
  --bg-gradient-end: rgba(255, 255, 255, 1);
  
  --text-primary: #1A1A1A;
  --text-secondary: #4A4A4A;
  --text-muted: #343A40; /* Darker Slate (Slate-800) for better visibility in light mode */
  --loader-bg: #FAFAFA;
  --text-inverse: #ffffff;
  
  /* Heading Hierarchy - Maximum Sharpness */
  --heading-primary: #121212;
  --heading-secondary: #212529;
  --heading-tertiary: #343A40;
  
  --border-primary: rgba(0, 0, 0, 0.1);
  --border-secondary: rgba(0, 0, 0, 0.06);
  --border-hover: rgba(0, 0, 0, 0.2);
  
  --accent-primary: #D97706; /* Amber-600 for better contrast on white */
  --accent-secondary: #B45309;
  --accent-dark: #78350F;
  
  --nav-text: #1A1A1A;
  
  /* Button States */
  --button-primary-bg: #FBBF24;
  --button-primary-text: #000000;
  --button-primary-hover: #F59E0B;
  --button-secondary-bg: rgba(0, 0, 0, 0.05);
  --button-secondary-text: #1A1A1A;
  --button-secondary-hover: rgba(0, 0, 0, 0.08);
  
  --shadow-sm: 0 1px 2px 0 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.06), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-glow: 0 0 20px rgba(217, 119, 6, 0.15);
  
  --shadow-adaptive: var(--shadow-lg);
  --bg-noise-opacity: 0.02;
  --bg-overlay: rgba(255, 255, 255, 0.6);
  --blend-mode-background: multiply;

  /* Extended Palette */
  --text-tertiary: #868E96;
  --text-quaternary: #ADB5BD;
  
  /* Surface Backgrounds */
  --bg-surface: rgba(0, 0, 0, 0.04);
  --bg-surface-hover: rgba(0, 0, 0, 0.06);
  --bg-surface-active: rgba(0, 0, 0, 0.1);
  
  /* Vertical Spacing Scale - Light Mode Sharpness */
  --section-spacing-mobile: 4rem;
  --section-spacing-desktop: 8rem;
  
  /* Additional Contrast Overrides for subpages */
  --text-muted: #2d3436; /* Deep Onyx for subpage visibility */
}

/* --- LOCAL FONTS (SELF-HOSTED) --- */
/* Dit vervangt de Google Fonts CDN call voor maximale privacy en snelheid */
@font-face {
  font-family: 'Inter';
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  src: url('/fonts/inter-var.ttf') format('truetype');
}

/* --- FONTAWESOME CDN OVERRIDE (PAGESPEED FIX) --- */
@font-face {
  font-family: 'FontAwesome';
  src: url('/fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
       url('/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
       url('/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
       url('/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
       url('/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* --- UNIVERSAL MOBILE NORMALIZATION MODULE --- */
:root {
  /* Expose safe areas as CSS variables for calc() usage */
  --sat: env(safe-area-inset-top);
  --sab: env(safe-area-inset-bottom);
  --sal: env(safe-area-inset-left);
  --sar: env(safe-area-inset-right);
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation; /* Improves touch response */
  
  /* CRITICAL FIX FOR VERCEL PROD: */
  /* Remove 'height: 100%' to prevent scroll locking. Use min-height instead. */
  min-height: 100%;
  height: auto;
  
  /* Ensure the root element handles the scroll */
  overflow-y: auto;
  overflow-x: hidden;
  
  overscroll-behavior-y: auto; /* Allow natural bounce */
  font-size: clamp(14px, 0.875rem + 0.75vw, 17px);
  scroll-padding-top: 120px;
}

@media (min-width: 1024px) {
  html {
    font-size: 16px;
  }
}

body {
  color: var(--text-primary);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
  /* PRODUCTION FIX: Ensure body takes up space but doesn't trap scroll */
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh; /* Dynamic viewport height for mobile */
  position: relative;
  
  /* Prevent double scrollbars */
  overflow-x: hidden;
  overflow-y: visible;
}

#root {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  isolation: isolate;
  /* Ensure root doesn't cut off fixed elements */
  overflow: visible; 
}

.min-h-screen-safe {
  min-height: 100vh;
  min-height: 100dvh;
}

.h-screen-safe {
  height: 100vh;
  height: 100dvh;
}

/* --- SCROLLBAR UTILITIES --- */
@media (min-width: 768px) {
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: var(--bg-primary); }
    ::-webkit-scrollbar-thumb { background: var(--border-primary); border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--accent-primary); }
}
@media (max-width: 767px) {
    ::-webkit-scrollbar { display: none; }
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

* { scrollbar-width: thin; scrollbar-color: var(--border-primary) var(--bg-primary); }

:root { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
p, article, input, textarea, code, pre { -webkit-user-select: text; user-select: text; }
::selection { background-color: #FBBF24; color: #000000; text-shadow: none; }
.content-visibility-auto { content-visibility: auto; contain-intrinsic-size: 1px 1000px; }

/* --- ANIMATIONS --- */
@keyframes fadeInUpCritical { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }
.hero-title-entry { animation: fadeInUpCritical 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; will-change: transform, opacity; opacity: 0; }
.hero-content-animated { opacity: 0; animation: fadeInHero 0.8s ease-out forwards; }
@keyframes fadeInHero { to { opacity: 1; } }
.animate-fade-in-up { animation: fadeInUpCritical 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.text-balance { text-wrap: balance; }

/* TECH STACK MARQUEE ANIMATION */
@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-scroll-left {
  animation: scroll-left 40s linear infinite;
}
.animate-scroll-left:hover {
  animation-play-state: paused;
}

/* CALCULATOR WIZARD TRANSITIONS */
.slide-transition-item {
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  animation-fill-mode: both;
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}
.step-enter-right { animation-name: slideInRight; }
.step-enter-left { animation-name: slideInLeft; }

/* EFFECTS */
.bg-noise { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); }
.overflow-y-auto, .overflow-x-auto, .overflow-scroll { -webkit-overflow-scrolling: touch; }
.line-clamp-none, .md\:line-clamp-none { -webkit-line-clamp: unset !important; }
.gpu-layer { transform: translate3d(0, 0, 0); backface-visibility: hidden; perspective: 1000px; will-change: transform; }
img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none; pointer-events: none; }

img { height: auto; max-width: 100%; }

img.interactive { pointer-events: auto; }
button, nav, menu, .select-none, a { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { -webkit-appearance: none; appearance: none; display: none; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus { -webkit-text-fill-color: var(--text-primary) !important; -webkit-box-shadow: 0 0 0px 1000px var(--bg-secondary) inset !important; transition: background-color 5000s ease-in-out 0s; caret-color: var(--accent-primary); }

/* --- PRINT CONFIGURATION (WYSIWYG) --- */
@media print {
  @page { 
      margin: 0; /* Let HTML handle margins */
      size: auto; 
  }
  
  body, html { 
      /* ELITE STYLING ENABLER: Force background colors and graphics */
      -webkit-print-color-adjust: exact !important; 
      print-color-adjust: exact !important;
      
      background-color: white !important; 
      width: 100% !important; 
      height: auto !important; 
      margin: 0 !important; 
      padding: 0 !important; 
      overflow: visible !important;
  }
  
  /* HIDE APPLICATION ROOT */
  #root { display: none !important; }

  /* SHOW PRINT CONTAINER (Portal) */
  #print-container { 
      visibility: visible !important; 
      display: block !important; 
      position: relative !important; /* Flow naturally */
      left: 0 !important; 
      top: 0 !important; 
      width: 100% !important; 
      margin: 0 !important; 
      padding: 0 !important; 
      z-index: 9999 !important; 
      background: white;
  }

  /* Force visibility of all children within print container */
  #print-container * {
      visibility: visible !important;
      opacity: 1 !important;
      -webkit-print-color-adjust: exact !important;
      print-color-adjust: exact !important;
  }

  /* Restore Layout Contexts */
  #print-container .flex { display: flex !important; }
  #print-container .grid { display: grid !important; }
  #print-container .hidden { display: none !important; }
}

@keyframes check-pop { 0% { transform: scale(0) rotate(-45deg); opacity: 0; } 60% { transform: scale(1.2) rotate(0deg); opacity: 1; } 100% { transform: scale(1) rotate(0deg); opacity: 1; } }
.check-pop-in { animation: check-pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
.glitch-active { animation: glitch-anim 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite; position: relative; will-change: transform; }
.glitch-active::before, .glitch-active::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: inherit; pointer-events: none; }
.glitch-active::before { left: 2px; text-shadow: -1px 0 #ff00c1; clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%); animation: glitch-anim-2 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite; }
.glitch-active::after { left: -2px; text-shadow: -1px 0 #00fff9; clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%); animation: glitch-anim 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite; }
@keyframes glitch-anim { 0% { transform: translate(0) } 20% { transform: translate(-2px, 2px) } 40% { transform: translate(-2px, -2px) } 60% { transform: translate(2px, 2px) } 80% { transform: translate(2px, -2px) } 100% { transform: translate(0) } }
@keyframes glitch-anim-2 { 0% { transform: translate(0) } 20% { transform: translate(2px, -2px) } 40% { transform: translate(2px, 2px) } 60% { transform: translate(-2px, -2px) } 80% { transform: translate(-2px, 2px) } 100% { transform: translate(0) } }
.wobbly-char { display: inline-block; will-change: transform, color; }
.mask-image-grunge { mask-image: url("data:image/svg+xml,%3Csvg width='200' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.5'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='200' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.5'/%3E%3C/svg%3E"); }