/* =========================================================
   TSCB UTILITY-SYSTEEM — buttons
   Onderdeel van het tscb-systeem, zie basis/kleur.css voor
   de kleur-bridge en het versie-/hergebruikbeleid.
   ---------------------------------------------------------
   OPZET (2 lagen):
   1. .brxe-button  = de VORM + de glossy STRUCTUUR. Dit is de
      per-project basis: hier tweak je radius/sheen/glans en
      maak je van elke knop iets eigens. De belichting is
      volledig opgebouwd uit color-mix() op de knop-kleur, dus
      ze past zich vanzelf aan élke paletkleur aan.
   2. tscb_btn_*    = de KLEUR-utility eroverheen. Zet alleen
      --_tscb_btn_bg (+ tekstkleur); de glossy-structuur uit
      laag 1 rekent zich daar automatisch omheen. Zo tweak je
      kleur zonder de vorm aan te raken.

   Per project pas je vooral de VORM-knoppen en de CUSTOM-
   sectie onderaan aan; de mechaniek in .brxe-button laat je
   staan of gebruik je als startpunt.
   ========================================================= */

/* --_tscb_btn_fill als animeerbare custom-property registreren,
   zodat de kleur (en alles wat eruit is afgeleid: sheen +
   inset-lagen) SOEPEL overvloeit op hover i.p.v. hard omklikt.
   Registratie is per spec globaal — kan niet scoped. */
@property --_tscb_btn_fill {
  syntax: "<color>";
  inherits: true;
  initial-value: #888888;
}

/* ---------------------------------------------------------
   7. BUTTONS — glossy basis op het Bricks button-element.
   ANTI-BOTS-REGELS (laten staan):
   - transition staat ALLEEN hier (één property; twee regels
     die 'm zetten overschrijven elkaar) → nooit elders
     transition op buttons zetten
   - hover/active beweging staat ALLEEN hier; combineer
     buttons dus NIET met tscb_anim_lift of tscb_anim_grow
   - de glossy box-shadow staat ALLEEN hier (idem: box-shadow
     is één property) → per project via de knoppen tweaken,
     niet met een tscb_shadow_* class combineren
   - :active dempt via de sterkteknoppen (--tscb_btn_gloss /
     --tscb_shadow_strength) i.p.v. de box-shadow property te
     zetten — zo werkt indrukken met élke kleurvariant

   WIE KRIJGT DIT: het Bricks button-element (.brxe-button) én
   de submit-knop van het Bricks form-element. Die laatste is
   een <button type="submit" class="bricks-button ..."> binnen
   .brxe-form en krijgt géén .brxe-button-class, en je kunt er
   vanuit de builder ook geen class op zetten. Vandaar dat hij
   hier in de selector meeloopt i.p.v. via een utility.
   Hij heeft geen tscb_btn_*-kleurklasse, dus valt terug op
   --_tscb_btn_bg hieronder = dezelfde kleur als
   .tscb_btn_primary_medium. Zet je die selector-lijsten uit
   elkaar, dan lopen de twee knoppen uit de pas — pas ze
   samen aan (basis, :hover en :active). Onderdelen/form.css
   raakt de knop bewust niet aan.
   --------------------------------------------------------- */
.brxe-button,
.brxe-form button[type="submit"] {
  /* ---- VORM-KNOPPEN (per project vrij te tweaken) ---- */
  --tscb_btn_radius: 2.6rem;
  /* text-transform: uppercase; */
  padding: 30px;            /* voorbeeld pill-look: 35px */
  /* padding laat ik aan de Bricks-control over; wil je 'm hier
     vastzetten: voeg `padding: 40px 35px;` toe (zie voorbeeld) */

  /* ---- GLANS-KNOPPEN ---- */
  --_tscb_btn_bg:    var(--tscb_primary_2);  /* fallback-kleur; utility-class overridet dit */
  --tscb_btn_gloss:  50;                    /* 0–100 — intensiteit van de inner lighting */

  /* Ambient diepte in RUST. Zonder deze regel erft de knop de
     100 uit basis/kleur.css en hangt hij hoog boven de pagina.
     Dit is de knop om 'm hoger of lager te laten staan; de
     ladder eronder (hover/active) hoort mee te zakken, anders
     is het verschil bij indrukken niet meer te zien. */
  --tscb_shadow_strength: 75;

  /* actieve (animerende) kleur — schuift op hover/active.
     Alles hieronder leest --_tscb_btn_fill, NIET --_tscb_btn_bg */
  --_tscb_btn_fill:  var(--_tscb_btn_bg);

  /* Afgeleide licht-tinten (auto uit de kleur). Elk met een
     override-hook: zet --tscb_btn_light / _mid / _shade om een
     specifieke knop met de hand te schilderen. */
  --_tscb_btn_light: var(--tscb_btn_light, color-mix(in srgb, var(--_tscb_btn_fill) 72%, #ffffff));
   /* --_tscb_btn_mid:   var(--tscb_btn_mid,   color-mix(in srgb, var(--_tscb_btn_fill) 55%, #000000)); */
   --_tscb_btn_mid:   var(--tscb_btn_mid,   color-mix(in srgb, var(--_tscb_btn_fill) 55%, #ff008c));
  /* --_tscb_btn_shade: var(--tscb_btn_shade, color-mix(in srgb, var(--_tscb_btn_fill) 30%, #000000)); */
   --_tscb_btn_shade: var(--tscb_btn_shade, color-mix(in srgb, var(--_tscb_btn_fill) 30%, #9e0000));

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  border: solid rgb(233 187 155 / 76%) 1px;
  border-radius: var(--tscb_btn_radius);
  color: var(--_tscb_btn_text, var(--tscb_white));
  text-decoration: none;
  cursor: pointer;

  /* Vulling: subtiele sheen-gradient uit de basiskleur (licht
     naar de bovenrand, iets donkerder onderin) */
  background: linear-gradient(125deg,
    color-mix(in srgb, var(--_tscb_btn_fill) 88%, #ffffff),
    color-mix(in srgb, var(--_tscb_btn_fill) 96%, #000000));

  /* Inner lighting (dimt mee met --tscb_btn_gloss) + neutrale
     ambient diepte (dimt mee met --tscb_shadow_strength).
     Alle drie de inset-lagen wijzen omhoog (negatieve y): de
     bovenkant vangt licht, de onderkant zakt in schaduw. */
  box-shadow:
    0 -7px  25px 0 inset color-mix(in srgb, var(--_tscb_btn_light) calc(24% * var(--tscb_btn_gloss) / 100), transparent),
    0 -36px 30px 0 inset color-mix(in srgb, var(--_tscb_btn_mid)   calc(85% * var(--tscb_btn_gloss) / 100), transparent),
    0 -79px 40px 0 inset color-mix(in srgb, var(--_tscb_btn_shade) calc(45% * var(--tscb_btn_gloss) / 100), transparent),
    0 2px  1px        color-mix(in srgb, var(--tscb_shadow_color) calc(6%  * var(--tscb_shadow_strength) / 100), transparent),
    1px 11px 17px 2px color-mix(in srgb, var(--tscb_shadow_color) calc(25% * var(--tscb_shadow_strength) / 100), transparent),
    0 8px  4px        color-mix(in srgb, var(--tscb_shadow_color) calc(9%  * var(--tscb_shadow_strength) / 100), transparent),
    0 16px 8px        color-mix(in srgb, var(--tscb_shadow_color) calc(9%  * var(--tscb_shadow_strength) / 100), transparent),
    0 32px 16px       color-mix(in srgb, var(--tscb_shadow_color) calc(9%  * var(--tscb_shadow_strength) / 100), transparent);

  /* Lettercontrast op de glossy vulling */
  text-shadow:
    0 1px 2px color-mix(in srgb, #ffffff 55%, transparent),
    0 -1px 1px color-mix(in srgb, #000000 15%, transparent);

  transition:
    translate        var(--tscb_anim_hover) var(--tscb_anim_ease),
    scale            var(--tscb_anim_hover) var(--tscb_anim_ease),
    --_tscb_btn_fill var(--tscb_anim_hover) var(--tscb_anim_ease),
    box-shadow       var(--tscb_anim_hover) var(--tscb_anim_ease),
    filter           var(--tscb_anim_hover) var(--tscb_anim_ease);
}

/* Hover = LICHTE PRESSDOWN (was een lift). De knop zakt een
   haartje weg; de ambient slagschaduw krimpt mee, anders blijft
   'ie zweven terwijl hij naar beneden gaat en klopt het niet.
   :active zet dezelfde beweging gewoon verder door — hover en
   active zijn nu één richting i.p.v. tegengesteld. */
.brxe-button:hover,
.brxe-form button[type="submit"]:hover {
  translate: 0 1px;
  scale: 0.995;
  --tscb_shadow_strength: 50;    /* ambient diepte zakt al iets */
  /* kleur lichter → sheen + belichting schuiven soepel mee.
     Leest --_tscb_btn_bg (de basiskleur), zet --_tscb_btn_fill
     — twee verschillende properties, dus geen var-cyclus */
  --_tscb_btn_fill: color-mix(in srgb, var(--_tscb_btn_bg) 88%, #ffffff);
}
.brxe-button:active,
.brxe-form button[type="submit"]:active {
  translate: 0 2px;
  scale: 0.985;
  --tscb_btn_gloss: 70;          /* glans zakt bij indrukken */
  --tscb_shadow_strength: 30;    /* ambient diepte zakt verder */
}

/* ---------------------------------------------------------
   KLEUR-UTILITY (laag 2) — zet alleen de kleur. 3 kleuren
   (primary/secondary/tertiary) × 3 tinten (light/medium/dark)
   = de paletkleuren 1/2/3 uit de Color Manager. De glossy-
   structuur uit .brxe-button rekent zich hier automatisch
   omheen. Alleen aanmaken wat je gebruikt; de rest weglaten.
   --------------------------------------------------------- */
/* primary — tint 1 = licht (donkere tekst), 2 = medium, 3 = donker */
.tscb_btn_primary_light  { --_tscb_btn_bg: var(--tscb_primary_1); --_tscb_btn_text: var(--tscb_grey_900); }
.tscb_btn_primary_medium { --_tscb_btn_bg: var(--tscb_primary_2); }
.tscb_btn_primary_dark   { --_tscb_btn_bg: var(--tscb_primary_3); }

/* secondary */
.tscb_btn_secondary_light  { --_tscb_btn_bg: var(--tscb_secondary_1); --_tscb_btn_text: var(--tscb_grey_900); }
.tscb_btn_secondary_medium { --_tscb_btn_bg: var(--tscb_secondary_2); }
.tscb_btn_secondary_dark   { --_tscb_btn_bg: var(--tscb_secondary_3); }

/* tertiary */
.tscb_btn_tertiary_light  { --_tscb_btn_bg: var(--tscb_tertiary_1); --_tscb_btn_text: var(--tscb_grey_900); }
.tscb_btn_tertiary_medium { --_tscb_btn_bg: var(--tscb_tertiary_2); }
.tscb_btn_tertiary_dark   { --_tscb_btn_bg: var(--tscb_tertiary_3); }

/* ---------------------------------------------------------
   8. PROJECT CUSTOM — vaste namen, per project invullen /
   uit-commenten. Startpunt: de knoppen die je hierboven hebt.
   Voorbeeld hieronder = de "candy/gummy" look waar dit systeem
   op gebaseerd is, nu geschreven via de knoppen i.p.v. vaste
   rgb-waarden. Combineer met een kleur-utility, bv.:
   class="tscb_btn_primary_medium tscb_btn_candy_ipm"
   --------------------------------------------------------- */
 /* .tscb_btn_candy_ipm {
  --tscb_btn_radius: 35px;
  padding: 40px 35px;
  --tscb_btn_gloss: 100;
   optioneel de belichting handmatig schilderen i.p.v. auto:
  --tscb_btn_light: #7fff6d;
  --tscb_btn_mid:   #386350;
  --tscb_btn_shade: #0f4682;
}  */

/* Custom button ideeën Timotheus Schoenmakers */
/* .tscb_btn_offcanv_klik_ipm, .brxe-nav-menu .bricks-mobile-menu-wrapper a  {
    margin: 35px 50px 35px 50px;
    box-shadow: rgb(0 0 0 / 16%) 0px 2px 4px, rgba(0, 0, 0, 0.3) -3px 6px 13px -3px, inset rgb(0 0 0 / 26%) 5px -3px 6px;
    border-radius: 7px;} */