/* ==========================================================================
   Alpha Flame - richting "Vloeibaar glas": design tokens

   Gebaseerd op warmtestore.nl, de referentie die de klant aanwees, met het
   glaswerk als hoofdrol. Observed op de referentie:

   - bijna zwarte warme basis (gemeten #001011, hier verlegd naar de
     anthraciet-toon van het eigen merkblad)
   - fel goudgeel accent (gemeten #FFC500) voor knoppen, badges en de balk
     bovenaan; hier standaard het saffraangoud van het merk, het referentiegeel
     zit in het variantenpaneel
   - halftransparante donkere lagen over fotografie (gemeten rgba(0,0,0,.2/.4))
     en zwevende widgets: dat gevoel is hier aangezet tot echt vloeibaar glas,
     met wazige, verzadigde panelen die boven de achtergrond zweven

   Het kleurgebruik komt van de Senivy-preview die de klant aanwees
   (preview.senivy.com/alpha-flame...), letterlijk uit de bron gemeten:
   sepiabruin #1C1611 / #211A14 / #2A211A, roomwit #F2EBDF / #E8DDCA,
   taupe #C4B6A0 / #B4A890 / #A99A82, messing #C9A25E met oker #9C7838,
   WhatsApp-groen #25D366, en warme panelen rgba(30,22,15,.90).

   Merkkleuren letterlijk uit het merkblad; al het overige is bewuste
   uitbreiding.
   ========================================================================== */

:root {
  /* --- Merkkleuren ------------------------------------------------------- */
  --brand-anthracite: #2f2f2f;
  --brand-bronze: #b27c24;
  --brand-saffron: #d9a51e;
  --brand-mustard: #8d683a;

  /* --- Diepe kamer: sepiatinten, gemeten op de Senivy-preview ------------ */
  --room-1000: #14100b;
  --room-950: #1c1611;
  --room-900: #211a14;
  --room-800: #2a211a;

  /* --- Tekst op donker: roomwit en taupe van de Senivy-preview ----------- */
  --paper-50: #f2ebdf;
  --paper-100: #e8ddca;
  --paper-300: #c4b6a0;
  --paper-500: #b4a890;
  --paper-600: #a3947c;

  /* --- Glasrecept --------------------------------------------------------
     Elk paneel: donkere basislaag + backdrop-blur + lichte rand + een
     spiegelende bovenrand. De basislaag is bewust dekkend genoeg dat tekst
     ook boven een lichte foto leesbaar blijft. */
  --glass-blur: 22px;
  --glass-bg: rgb(30 23 16 / 74%);
  --glass-bg-strong: rgb(28 22 17 / 88%);
  --glass-bg-input: rgb(15 11 8 / 55%);
  --glass-line: rgb(255 255 255 / 14%);
  --glass-line-strong: rgb(255 255 255 / 24%);
  --glass-shine: inset 0 1px 0 rgb(255 255 255 / 16%);
  --glass-shadow: 0 1.25rem 3rem rgb(0 0 0 / 45%);

  /* --- Accent (wisselbaar) -----------------------------------------------
     --gold       vullingen en vlakken
     --gold-text  goudtekst op donker, >= 4.5:1
     --gold-ink   tekst op een goudvlak, >= 4.5:1
     --gold-hover vulling bij hover, klopt met --gold-ink */
  --gold: #c9a25e;
  --gold-text: #cfa964;
  --gold-ink: #1c1611;
  --gold-hover: #d9b578;
  --gold-glow: 201 162 94;

  /* --- Semantisch -------------------------------------------------------- */
  --ok: #6fbd8d;
  --ok-deep: #244d36;
  --err: #e5867a;
  --err-bg: rgb(122 44 35 / 40%);

  /* WhatsApp-knop, overgenomen van de Senivy-preview */
  --wa: #25d366;
  --wa-hover: #3fdf7a;
  --wa-ink: #0d2e1a;

  /* --- Typografie (uitbreiding) ------------------------------------------
     Sora heeft de ronde, technische snit die bij glas past; Figtree is de
     rustige leesletter ernaast. */
  --font-display: "Sora", "Trebuchet MS", "Helvetica Neue", sans-serif;
  --font-body: "Figtree", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: clamp(1.375rem, 1rem + 1.5vw, 2rem);
  --text-4xl: clamp(1.625rem, 1.1rem + 2.4vw, 2.75rem);
  --text-5xl: clamp(2rem, 1.2rem + 3.8vw, 3.9rem);

  --leading-tight: 1.08;
  --leading-snug: 1.25;
  --leading-body: 1.6;
  --track-wide: 0.06em;
  --track-wider: 0.15em;

  /* --- Ritme ------------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;

  --section-y: clamp(3rem, 6vw, 5.5rem);
  --gutter: clamp(1rem, 3vw, 2.5rem);
  --container: 78rem;
  --measure: 36rem;

  /* --- Vorm -------------------------------------------------------------- */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --fast: 130ms cubic-bezier(0.3, 0, 0.2, 1);
  --base: 220ms cubic-bezier(0.3, 0, 0.2, 1);
  --slow: 480ms cubic-bezier(0.2, 0, 0.1, 1);

  --header-h: 8.25rem;
}

/* Accentvarianten: het messing van de Senivy-preview (standaard), het
   saffraangoud van het merkblad, en het gemeten referentiegeel */
:root[data-accent="brass"] {
  --gold: #c9a25e;
  --gold-text: #cfa964;
  --gold-ink: #1c1611;
  --gold-hover: #d9b578;
  --gold-glow: 201 162 94;
}
:root[data-accent="saffron"] {
  --gold: #d9a51e;
  --gold-text: #e3b53a;
  --gold-ink: #171512;
  --gold-hover: #e9b833;
  --gold-glow: 217 165 30;
}
:root[data-accent="amber"] {
  --gold: #ffc500;
  --gold-text: #ffd04a;
  --gold-ink: #171512;
  --gold-hover: #ffd54a;
  --gold-glow: 255 197 0;
}

/* Glasdichtheid via het paneel: helder laat meer doorschijnen, mat is
   rustiger en dekt meer af */
:root[data-glass="helder"] {
  --glass-blur: 22px;
  --glass-bg: rgb(30 23 16 / 74%);
  --glass-bg-strong: rgb(28 22 17 / 88%);
}
:root[data-glass="mat"] {
  --glass-blur: 12px;
  --glass-bg: rgb(28 22 16 / 92%);
  --glass-bg-strong: rgb(26 20 15 / 96%);
}

@media (max-width: 64rem) {
  :root {
    --header-h: 11.5rem;
  }
}

/* Kleurenschema-variant: het neutrale antraciet van de eerdere shop-richting
   (designs/alpha-flame-shop) in plaats van het Senivy-sepia. */
:root[data-scheme="shop"] {
  --room-1000: #100f0e;
  --room-950: #161513;
  --room-900: #1c1a18;
  --room-800: #292624;
  --paper-50: #f8f5ef;
  --paper-100: #ebe6dc;
  --paper-300: #c5bfb4;
  --paper-500: #a49d92;
  --paper-600: #948d83;
}

:root[data-scheme="shop"][data-glass="helder"] {
  --glass-bg: rgb(26 24 21 / 74%);
  --glass-bg-strong: rgb(22 20 18 / 88%);
  --glass-bg-input: rgb(12 11 10 / 55%);
}

:root[data-scheme="shop"][data-glass="mat"] {
  --glass-bg: rgb(25 23 20 / 92%);
  --glass-bg-strong: rgb(21 19 17 / 96%);
  --glass-bg-input: rgb(12 11 10 / 55%);
}