/* =========================================================
   TSCB UTILITY-SYSTEEM — box- en drop-shadows
   Onderdeel van het tscb-systeem, zie basis/kleur.css voor
   de kleur-bridge en het versie-/hergebruikbeleid.
   ========================================================= */

/* ---------------------------------------------------------
   SCHADUW-TOKENS — bewust op * i.p.v. :root.
   CSS-variabelen substitueren hun binnenste var()'s op het
   element waar ze GEDEFINIEERD zijn. In :root zou de
   sterkteknop en schaduwkleur dus alleen globaal werken;
   op * herrekenen ze per element, waardoor overrides per
   sectie, sub class of :active (buttons) gewoon werken.
   Opacity-patroon: calc(basis% * strength / 100).
   Basiswaarden (--tscb_shadow_color, --tscb_shadow_strength)
   staan in basis/kleur.css — hier alleen de afgeleide tokens.
   --------------------------------------------------------- */
*, *::before, *::after {
  /* Box-shadow tokens — kleur uit bridge, opacity via de knop */
  --tscb_shadow_soft_1:   0 1px 2px color-mix(in srgb, var(--tscb_shadow_color) calc(6% * var(--tscb_shadow_strength) / 100), transparent), 0 1px 3px color-mix(in srgb, var(--tscb_shadow_color) calc(10% * var(--tscb_shadow_strength) / 100), transparent);
  --tscb_shadow_soft_2:   0 4px 6px color-mix(in srgb, var(--tscb_shadow_color) calc(5% * var(--tscb_shadow_strength) / 100), transparent), 0 10px 15px color-mix(in srgb, var(--tscb_shadow_color) calc(10% * var(--tscb_shadow_strength) / 100), transparent);
  --tscb_shadow_soft_3:   0 10px 20px color-mix(in srgb, var(--tscb_shadow_color) calc(6% * var(--tscb_shadow_strength) / 100), transparent), 0 20px 40px color-mix(in srgb, var(--tscb_shadow_color) calc(12% * var(--tscb_shadow_strength) / 100), transparent);
  --tscb_shadow_medium_1: 0 2px 4px color-mix(in srgb, var(--tscb_shadow_color) calc(10% * var(--tscb_shadow_strength) / 100), transparent);
  --tscb_shadow_medium_2: 0 6px 12px color-mix(in srgb, var(--tscb_shadow_color) calc(14% * var(--tscb_shadow_strength) / 100), transparent);
  --tscb_shadow_medium_3: 0 14px 28px color-mix(in srgb, var(--tscb_shadow_color) calc(18% * var(--tscb_shadow_strength) / 100), transparent);
  --tscb_shadow_hard_1:   0 2px 4px color-mix(in srgb, var(--tscb_shadow_color) calc(25% * var(--tscb_shadow_strength) / 100), transparent);
  --tscb_shadow_hard_2:   0 4px 8px color-mix(in srgb, var(--tscb_shadow_color) calc(30% * var(--tscb_shadow_strength) / 100), transparent);
  --tscb_shadow_hard_3:   0 8px 16px color-mix(in srgb, var(--tscb_shadow_color) calc(35% * var(--tscb_shadow_strength) / 100), transparent);

  /* Drop-shadow tokens (filter) — zelfde kleur + sterkteknop */
  --tscb_drop_soft_1:   drop-shadow(0 2px 4px color-mix(in srgb, var(--tscb_shadow_color) calc(10% * var(--tscb_shadow_strength) / 100), transparent));
  --tscb_drop_soft_2:   drop-shadow(0 6px 10px color-mix(in srgb, var(--tscb_shadow_color) calc(12% * var(--tscb_shadow_strength) / 100), transparent));
  --tscb_drop_soft_3:   drop-shadow(0 12px 20px color-mix(in srgb, var(--tscb_shadow_color) calc(14% * var(--tscb_shadow_strength) / 100), transparent));
  --tscb_drop_medium_1: drop-shadow(0 2px 4px color-mix(in srgb, var(--tscb_shadow_color) calc(18% * var(--tscb_shadow_strength) / 100), transparent));
  --tscb_drop_medium_2: drop-shadow(0 5px 9px color-mix(in srgb, var(--tscb_shadow_color) calc(22% * var(--tscb_shadow_strength) / 100), transparent));
  --tscb_drop_medium_3: drop-shadow(0 10px 18px color-mix(in srgb, var(--tscb_shadow_color) calc(26% * var(--tscb_shadow_strength) / 100), transparent));
  --tscb_drop_hard_1:   drop-shadow(0 2px 3px color-mix(in srgb, var(--tscb_shadow_color) calc(30% * var(--tscb_shadow_strength) / 100), transparent));
  --tscb_drop_hard_2:   drop-shadow(0 4px 7px color-mix(in srgb, var(--tscb_shadow_color) calc(35% * var(--tscb_shadow_strength) / 100), transparent));
  --tscb_drop_hard_3:   drop-shadow(0 8px 14px color-mix(in srgb, var(--tscb_shadow_color) calc(40% * var(--tscb_shadow_strength) / 100), transparent));
}

/* ---------------------------------------------------------
   4. BOX-SHADOW — rechthoekige schaduw op de element-box
   Kleur uit het Bricks-palet, opacity via de sterkteknop
   (--tscb_shadow_strength, 0–100).
   Modifier: _inset (schaduw naar binnen)
   --------------------------------------------------------- */
.tscb_shadow_soft_1   { box-shadow: var(--tscb_shadow_soft_1); }
.tscb_shadow_soft_2   { box-shadow: var(--tscb_shadow_soft_2); }
.tscb_shadow_soft_3   { box-shadow: var(--tscb_shadow_soft_3); }
.tscb_shadow_medium_1 { box-shadow: var(--tscb_shadow_medium_1); }
.tscb_shadow_medium_2 { box-shadow: var(--tscb_shadow_medium_2); }
.tscb_shadow_medium_3 { box-shadow: var(--tscb_shadow_medium_3); }
.tscb_shadow_hard_1   { box-shadow: var(--tscb_shadow_hard_1); }
.tscb_shadow_hard_2   { box-shadow: var(--tscb_shadow_hard_2); }
.tscb_shadow_hard_3   { box-shadow: var(--tscb_shadow_hard_3); }

/* Modifier: _inset — schaduw naar binnen */
.tscb_shadow_soft_1_inset   { box-shadow: inset var(--tscb_shadow_soft_1); }
.tscb_shadow_soft_2_inset   { box-shadow: inset var(--tscb_shadow_soft_2); }
.tscb_shadow_soft_3_inset   { box-shadow: inset var(--tscb_shadow_soft_3); }
.tscb_shadow_medium_1_inset { box-shadow: inset var(--tscb_shadow_medium_1); }
.tscb_shadow_medium_2_inset { box-shadow: inset var(--tscb_shadow_medium_2); }
.tscb_shadow_medium_3_inset { box-shadow: inset var(--tscb_shadow_medium_3); }
.tscb_shadow_hard_1_inset   { box-shadow: inset var(--tscb_shadow_hard_1); }
.tscb_shadow_hard_2_inset   { box-shadow: inset var(--tscb_shadow_hard_2); }
.tscb_shadow_hard_3_inset   { box-shadow: inset var(--tscb_shadow_hard_3); }

/* ---------------------------------------------------------
   5. DROP-SHADOW — filter-schaduw, volgt vorm/transparantie
   Voor PNG's, iconen, SVG's. Inset kan niet met filter.
   Zelfde paletkleur + sterkteknop als box-shadow.
   --------------------------------------------------------- */
.tscb_drop_soft_1   { filter: var(--tscb_drop_soft_1); }
.tscb_drop_soft_2   { filter: var(--tscb_drop_soft_2); }
.tscb_drop_soft_3   { filter: var(--tscb_drop_soft_3); }
.tscb_drop_medium_1 { filter: var(--tscb_drop_medium_1); }
.tscb_drop_medium_2 { filter: var(--tscb_drop_medium_2); }
.tscb_drop_medium_3 { filter: var(--tscb_drop_medium_3); }
.tscb_drop_hard_1   { filter: var(--tscb_drop_hard_1); }
.tscb_drop_hard_2   { filter: var(--tscb_drop_hard_2); }
.tscb_drop_hard_3   { filter: var(--tscb_drop_hard_3); }

/* ---------------------------------------------------------
   8. PROJECT CUSTOM — vaste namen, per project invullen.
   Voor speciale schaduwen die buiten de standaardset vallen.
   Leeg in het basisbestand; de standaardgroepen hierboven
   wijzig je NOOIT per project.
   --------------------------------------------------------- */
/* .tscb_shadow_custom_1 { }
.tscb_shadow_custom_2 { }
.tscb_shadow_custom_3 { } */