/* ==========================================================================
   BeautyConsult Shop — design tokens
   Eén bron van waarheid voor kleuren, maten en vormen.
   Wijzig hier, niet in de losse componenten.
   ========================================================================== */

:root {

	/* --- Kleuren -------------------------------------------------------- */
	--bc-oranje:          #E87722;  /* vlakken, knopvulling, randen, badges */
	--bc-oranje-tekst:    #C25E12;  /* kleine tekst op wit (contrast AA)    */
	--bc-oranje-hover:    #D0630F;
	--bc-oranje-zacht:    #F2A93B;

	--bc-bruin:           #5C4130;  /* koppen, footer-achtergrond */
	--bc-body:            #4A3525;  /* bodytekst */
	--bc-meta:            #9A8878;  /* meta-regels, prijzen in stappen */

	--bc-creme:           #FBF3E8;  /* zachte sectie-achtergrond */
	--bc-wit:             #FFFFFF;
	--bc-rand:            #EFE3D2;  /* kaartranden */

	--bc-blauw:           #48B8E0;  /* secundaire CTA, quiz-accent */
	--bc-blauw-hover:     #2FA3CD;

	--bc-footer-tekst:    #EBDDCB;
	--bc-credit:          #B69B82;

	/* Streepjesband */
	--bc-streep-1:        #E87722;
	--bc-streep-2:        #F2A93B;
	--bc-streep-3:        #48B8E0;
	--bc-streep-4:        #FFFFFF;
	--bc-streep-5:        #D9542E;
	--bc-streep-6:        #F2C94C;

	/* --- Typografie ----------------------------------------------------- */
	--bc-font:            'PT Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--bc-fs-meta:         11.5px;
	--bc-fs-eyebrow:      11.5px;
	--bc-fs-klein:        12.5px;
	--bc-fs-body:         13px;
	--bc-fs-body-plus:    13.5px;
	--bc-fs-label:        14px;
	--bc-fs-groot:        15px;
	--bc-fs-kop-klein:    18px;
	--bc-fs-kop:          19px;
	--bc-fs-hero:         26px;

	--bc-ls-eyebrow:      0.12em;
	--bc-ls-lockup:       0.18em;
	--bc-ls-shop:         0.42em;

	/* --- Vormen --------------------------------------------------------- */
	--bc-radius-pill:     99px;
	--bc-radius-kaart:    18px;
	--bc-radius-klein:    14px;
	--bc-radius-mini:     10px;

	--bc-schaduw-hero:    0 12px 32px rgba(92, 65, 48, 0.16);

	/* --- Maten ---------------------------------------------------------- */
	--bc-gutter:          20px;   /* horizontale marge mobiel */
	--bc-streep-hoogte:   8px;
	--bc-cirkel-cat:      96px;   /* categoriecirkels */
	--bc-cirkel-hilde:    104px;  /* ronde foto Hilde */
	--bc-overlap:         -44px;  /* zwevende herokaart */
	--bc-tap:             44px;   /* minimale tap target */
}