/* =========================================================
   Design tokens — Shapes, Motion & Elevation

   Schaal overgenomen uit het concept (concept.leadsprint.nl/autogloss).
   Kleuren staan in colors.css, type in typography.css, ruimte in
   spacing.css. Hier staat wat daar niet onder valt.
========================================================= */

:root {

  /* ======================================================
     RADIUS

     Het concept kent drie maten die er echt toe doen:
       24px  kaart, figure, formulier, embed  → --radius-card
       100px pill: knop, badge, tag           → --radius-full
       44px  sectie-overgang (28px op mobiel) → --radius-section

     De kleinere maten zijn voor invoervelden en chips.
  ====================================================== */

  --radius-xs:      4px;   /* voortgangsbalkje, streepje */
  --radius-sm:      8px;   /* logo, klein vlak */
  --radius-md:     14px;   /* input, textarea */
  --radius-lg:     16px;   /* chip, keuzeblok, figcaption */
  --radius-card:   24px;   /* de hoofdwaarde */
  --radius-xl:     24px;   /* alias van card */
  --radius-section: clamp(28px, 4vw, 44px);
  --radius-full:  100px;


  /* ======================================================
     MOTION

     Het concept gebruikt consequent één curve:
       cubic-bezier(.2, .7, .2, 1)
     Zacht uitrollend, nooit overshoot. Dat is --ease-out en
     tegelijk de huisstijl-curve; wijk er alleen van af met reden.
  ====================================================== */

  --ease-out:     cubic-bezier(.2, .7, .2, 1);
  --ease-in:      cubic-bezier(.8, .2, .6, 1);
  --ease-soft:    cubic-bezier(.22, 1, .36, 1);
  --ease-premium: cubic-bezier(.16, 1, .3, 1);

  /* Durations, zoals ze in het concept voorkomen */
  --dur-fast:   .2s;   /* knop, kleurwissel */
  --dur-base:   .3s;   /* kaart-hover, logo */
  --dur-nav:    .35s;  /* navigatie die krimpt */
  --dur-soft:   .4s;   /* accordeon, mobiel menu */
  --dur-slow:   .5s;   /* afbeelding die inzoomt */
  --dur-reveal: .6s;   /* stagger-reveal bij scroll */
  --dur-mask:   .8s;   /* regel die van onder binnenkomt */
  --dur-line:  1.1s;   /* accentlijn die uitloopt */

  /* Vertraging tussen items in een stagger */
  --stagger-step: .07s;


  /* ======================================================
     ELEVATION

     Op zwart werkt een schaduw anders dan op wit: hij moet
     dieper en zachter, anders zie je hem niet.
  ====================================================== */

  --shadow-soft:     0 4px 24px rgba(0, 0, 0, .35);
  --shadow-card:     0 10px 40px rgba(0, 0, 0, .35);
  --shadow-elevated: 0 20px 60px rgba(0, 0, 0, .45);

  /* Schaduw omhoog, voor een sectie die over de vorige heen schuift */
  --shadow-overlap:  0 -30px 80px rgba(0, 0, 0, .45);


  /* ======================================================
     LAGEN
  ====================================================== */

  --z-below:    -1;
  --z-base:      2;
  --z-nav:      30;
  --z-overlay:  40;
  --z-modal:   100;


  /* ======================================================
     GLAS — herhalend patroon in het concept: halftransparant
     vlak met blur, voor badges, tags en de gekrompen nav.
  ====================================================== */

  --glass-bg:     rgba(243, 239, 232, .12);
  --glass-dark:   rgba(14, 14, 14, .78);
  --glass-blur:   blur(10px);
  --glass-blur-lg: blur(18px);

}