/* 🎯 DEFINITIEVE LIQUID GLASS CONFIGURATIE - Het Controlepaneel */
/*
  BELANGRIJK: Gebruik geen !important in de variabele waardes zelf.
  De waarden worden direct in functies zoals rgba() en backdrop-filter
  geïnjecteerd, en een !important binnen de var() maakt de volledige
  declaratie ongeldig. Verhoog indien nodig de specificiteit van de
  selector in plaats van !important op te nemen in de waarde.
*/

:root {
  /* 🎯 BLUR & DISTORTION SETTINGS */
  --glass-blur-base: 14px;
  --glass-blur-hover: 16px;
  --glass-saturation: 160%;
  --glass-contrast: 105%;
  --glass-brightness: 108%;

  /* SVG Distortion Parameters */
  --distortion-frequency-x: 0.02;
  --distortion-frequency-y: 0.03;
  --distortion-octaves: 3;
  --distortion-scale: 20;
  --distortion-seed: 7;

  /* 🎯 GLASS BODY SETTINGS */
  --glass-bg-opacity-start: 0.22 !important;
  --glass-bg-opacity-mid: 0.1 !important;
  --glass-bg-opacity-end: 0.16 !important;
  --glass-border-opacity: 0.45 !important;

  /* 3D Shadow Depth */
  --glass-shadow-main: 0 12px 40px rgba(0, 0, 0, 0.25);
  --glass-shadow-secondary: 0 3px 12px rgba(0, 0, 0, 0.12);
  --glass-shadow-hover-main: 0 16px 50px rgba(0, 0, 0, 0.3);
  --glass-shadow-hover-secondary: 0 5px 16px rgba(0, 0, 0, 0.18);

  /* Inset Shadows for Depth */
  --glass-inset-light: inset 0 1px 2px rgba(255, 255, 255, 0.7);
  --glass-inset-dark: inset 0 -1px 2px rgba(0, 0, 0, 0.08);

  /* 🎯 HIGHLIGHT SETTINGS (::before layer) */
  --highlight-top-intensity: 0.7;
  --highlight-top-falloff: 0.25;
  --highlight-bottom-intensity: 0.12;
  --highlight-ellipse-width: 170%;
  --highlight-ellipse-height: 115%;
  --highlight-position-y: -22%;

  /* Inner Glow */
  --inner-glow-spread: -6px;
  --inner-glow-intensity: 0.45;
  --inner-shadow-offset: -3px;
  --inner-shadow-blur: 6px;

  /* 🎯 HOVER INTENSIFICATION */
  --hover-lift: -1.5px;
  --hover-highlight-boost: 0.7;
  --hover-blur-boost: 1px;
  --hover-saturation-boost: 6%;

  /* 🎯 ANIMATION SETTINGS */
  --glass-transition-speed: 0.3s;
  --glass-transition-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 🌙 DARK MODE OVERRIDES */
[data-theme="dark"] {
  --glass-bg-opacity-start: 0.1 !important;
  --glass-bg-opacity-mid: 0.05 !important;
  --glass-bg-opacity-end: 0.07 !important;
  --glass-border-opacity: 0.28 !important;

  --glass-shadow-main: 0 10px 32px rgba(0, 0, 0, 0.35);
  --glass-shadow-secondary: 0 3px 12px rgba(0, 0, 0, 0.2);
  --glass-shadow-hover-main: 0 14px 44px rgba(0, 0, 0, 0.4);
  --glass-shadow-hover-secondary: 0 5px 16px rgba(0, 0, 0, 0.24);

  --glass-inset-light: inset 0 1px 2px rgba(255, 255, 255, 0.35);
  --glass-inset-dark: inset 0 -1px 2px rgba(0, 0, 0, 0.18);

  --highlight-top-intensity: 0.32;
  --highlight-top-falloff: 0.14;
  --highlight-bottom-intensity: 0.07;
  --inner-glow-intensity: 0.28;
}

@media (prefers-color-scheme: dark) {
  :root {
    --glass-bg-opacity-start: 0.1 !important;
    --glass-bg-opacity-mid: 0.05 !important;
    --glass-bg-opacity-end: 0.07 !important;
    --glass-border-opacity: 0.28 !important;

    --glass-shadow-main: 0 10px 32px rgba(0, 0, 0, 0.35);
    --glass-shadow-secondary: 0 3px 12px rgba(0, 0, 0, 0.2);
    --glass-shadow-hover-main: 0 14px 44px rgba(0, 0, 0, 0.4);
    --glass-shadow-hover-secondary: 0 5px 16px rgba(0, 0, 0, 0.24);

    --glass-inset-light: inset 0 1px 2px rgba(255, 255, 255, 0.35);
    --glass-inset-dark: inset 0 -1px 2px rgba(0, 0, 0, 0.18);

    --highlight-top-intensity: 0.32;
    --highlight-top-falloff: 0.14;
    --highlight-bottom-intensity: 0.07;
    --inner-glow-intensity: 0.28;
  }
}

/* 🎮 PRESET CONFIGURATIONS - Uncomment om te experimenteren! */

/* EXTREME LIQUID - Voor maximaal effect */
/*
:root {
  --glass-blur-base: 20px;
  --glass-blur-hover: 24px;
  --distortion-scale: 35;
  --distortion-frequency-x: 0.025;
  --distortion-frequency-y: 0.035;
  --glass-shadow-main: 0 20px 60px rgba(0, 0, 0, 0.35);
  --glass-shadow-hover-main: 0 25px 70px rgba(0, 0, 0, 0.4);
  --highlight-top-intensity: 0.9;
  --glass-saturation: 200%;
  --glass-brightness: 115%;
}
*/

/* SUBTLE GLASS - Voor minimalistisch effect */
/*
:root {
  --glass-blur-base: 8px; 
  --glass-blur-hover: 10px;
  --distortion-scale: 10;
  --glass-bg-opacity-start: 0.15 !important;
  --glass-bg-opacity-mid: 0.08 !important;
  --glass-bg-opacity-end: 0.12 !important;
  --glass-shadow-main: 0 6px 20px rgba(0, 0, 0, 0.15);
  --glass-shadow-hover-main: 0 8px 25px rgba(0, 0, 0, 0.2);
  --highlight-top-intensity: 0.4;
  --glass-saturation: 130%;
}
*/

/* NEON GLOW - Voor futuristische look */
/*
:root {
  --glass-blur-base: 16px;
  --glass-blur-hover: 20px;
  --glass-saturation: 220%;
  --glass-brightness: 125%;
  --glass-shadow-main: 0 15px 45px rgba(79, 70, 229, 0.3);
  --glass-shadow-hover-main: 0 20px 55px rgba(79, 70, 229, 0.4);
  --highlight-top-intensity: 0.8;
  --inner-glow-intensity: 0.8;
  --distortion-scale: 25;
}
*/

/* FROSTED GLASS - Voor matte look */
/*
:root {
  --glass-blur-base: 25px;
  --glass-blur-hover: 28px;
  --glass-saturation: 120%;
  --glass-bg-opacity-start: 0.35 !important;
  --glass-bg-opacity-mid: 0.25 !important;
  --glass-bg-opacity-end: 0.30 !important;
  --distortion-scale: 5;
  --highlight-top-intensity: 0.5;
  --glass-contrast: 105%;
}
*/

/* CRYSTAL CLEAR - Voor ultra-transparant effect */
/*
:root {
  --glass-blur-base: 12px;
  --glass-blur-hover: 14px;
  --glass-bg-opacity-start: 0.08 !important;
  --glass-bg-opacity-mid: 0.04 !important;
  --glass-bg-opacity-end: 0.06 !important;
  --glass-border-opacity: 0.8;
  --highlight-top-intensity: 0.9;
  --inner-glow-intensity: 0.7;
  --glass-saturation: 180%;
  --distortion-scale: 15;
}
*/