/* ============================================
   TOKENS — 5-kelleren-brutal
   Brutalist design system
   Archivo Black + Libre Baskerville
   ============================================ */

:root {
  /* ---- Palette ---- */
  --concrete:       #1C1C1C;
  --concrete-mid:   #2A2A2A;
  --concrete-light:  #3A3A3A;
  --bone:           #E8E0D4;
  --rust:           #C44A2D;
  --yellow:         #D4A855;
  --black:          #0F0F0F;
  --white:          #FAFAFA;

  /* ---- Typography ---- */
  --font-heading:   'Archivo Black', Impact, sans-serif;
  --font-body:      'Libre Baskerville', 'Georgia', serif;

  --fs-hero:        clamp(3.5rem, 10vw, 9rem);
  --fs-h1:          clamp(2.5rem, 6vw, 5rem);
  --fs-h2:          clamp(2rem, 4vw, 3.5rem);
  --fs-h3:          clamp(1.25rem, 2vw, 1.75rem);
  --fs-body:        clamp(1rem, 1.1vw, 1.125rem);
  --fs-small:       clamp(0.8rem, 0.9vw, 0.875rem);
  --fs-label:       0.75rem;
  --fs-stat:        clamp(3rem, 8vw, 6rem);
  --fs-watermark:   clamp(5rem, 18vw, 14rem);
  --fs-ghost:       clamp(4rem, 8vw, 7rem);

  --lh-heading:     0.95;
  --lh-body:        1.7;
  --ls-heading:     0.02em;
  --ls-label:       0.15em;

  /* ---- Spacing ---- */
  --space-xs:       0.5rem;
  --space-sm:       1rem;
  --space-md:       2rem;
  --space-lg:       4rem;
  --space-xl:       6rem;
  --space-2xl:      8rem;
  --space-section:  clamp(4rem, 10vh, 8rem);

  /* ---- Layout ---- */
  --container:      1200px;
  --gutter:         clamp(1.5rem, 4vw, 3rem);

  /* ---- Borders ---- */
  --border-thin:    1px solid;
  --border-thick:   3px solid;
  --border-heavy:   5px solid;
  --radius:         0;

  /* ---- Transitions ---- */
  --ease-out:       cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out:    cubic-bezier(0.42, 0, 0.58, 1);
  --duration-fast:  0.3s;
  --duration-mid:   0.5s;
  --duration-slow:  0.8s;

  /* ---- Clip-path states ---- */
  --clip-hidden:    polygon(0 0, 0 0, 0 100%, 0 100%);
  --clip-visible:   polygon(0 0, 100% 0, 100% 100%, 0 100%);

  /* ---- Z-index ---- */
  --z-base:         1;
  --z-overlay:      100;
  --z-nav:          200;
  --z-cookie:       300;
}