/* ==========================================================================
 * DigiSomm gastapp — thema-basis
 *
 * De thema's van de gastapp bleven elk hun eigen volledige lijst waarden, en
 * dus konden ze los van elkaar wegdrijven: verschillende alfa's voor hetzelfde
 * grijs, verschillende radiusverhoudingen, drie keer dezelfde kaartschaduw
 * anders geschreven. Dit bestand rekent al die samengestelde waarden één keer
 * uit; een thema geeft alleen nog zijn eigen grondstoffen op.
 *
 * De variabelenamen zijn ongewijzigd. InteractiveSommelier leest exact
 * dezelfde --theme-* namen als voorheen en weet niet dat er iets veranderd is.
 *
 * Laad dit bestand vóór de thema's:
 *   themeStylesheetPaths = ["/themes/digisomm-theme-base.css", …]
 *
 * Wat een thema zelf opgeeft:
 *   --t-bg  --t-bg-alt  --t-surface        de drie vlakken
 *   --t-text-rgb  --t-muted-rgb            tekst en gedempte tekst
 *   --t-accent  --t-accent-rgb  --t-signal accent en signaalkleur
 *   --t-contrast-rgb                       waarmee je vlakken licht maakt
 *   --t-action-text                        tekst op de actiekleur
 *   --t-frame  --t-frame-detail            de telefoon in de marketingmock
 *   --t-display-font                       de kopletter van het thema
 *   --t-radius                             één maat; de rest volgt
 *   --t-panel-alpha                        hoe zwaar een paneel oplicht
 *   --t-shadow                             kaartschaduw, of none
 * ====================================================================== */

:root,
html[data-digisomm-theme],
[data-theme] {
  /* --- De vlakken ----------------------------------------------------- */
  --theme-background: var(--t-bg);
  --theme-background-alt: var(--t-bg-alt);
  --theme-surface: var(--t-surface);

  /* --- Tekst ---------------------------------------------------------- */
  --theme-text: rgb(var(--t-text-rgb));
  --theme-text-rgb: var(--t-text-rgb);
  --theme-muted-rgb: var(--t-muted-rgb);
  --theme-muted: rgb(var(--t-muted-rgb) / 0.62);

  /* --- Accent en signaal ---------------------------------------------- */
  --theme-accent: var(--t-accent);
  --theme-accent-rgb: var(--t-accent-rgb);
  --theme-signal: var(--t-signal);
  --theme-contrast-rgb: var(--t-contrast-rgb);
  --theme-action: var(--t-accent);
  --theme-action-text: var(--t-action-text);

  /* Drie sterktes van hetzelfde accent, overal in dezelfde verhouding:
     nauwelijks (faint), gekozen (selected), en de rand van een kaart. */
  --theme-faint: rgb(var(--t-accent-rgb) / 0.15);
  --theme-selected: rgb(var(--t-accent-rgb) / 0.1);
  --theme-panel: rgb(var(--t-contrast-rgb) / var(--t-panel-alpha, 0.05));

  /* --- De telefoon in de marketingmock -------------------------------- */
  --theme-frame: var(--t-frame);
  --theme-frame-detail: var(--t-frame-detail);

  /* --- Samengestelde achtergronden ------------------------------------ */
  /* Eén formule voor alle thema's: de kaart loopt van oppervlak naar het
     tweede vlak, de landingsachtergrond heeft één accentgloed rechtsboven.
     Dat de drie thema's er verschillend uitzien komt nu volledig van hun
     eigen kleuren, niet van drie verschillende recepten. */
  --theme-card-background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--t-surface) 99%, transparent),
    color-mix(in srgb, var(--t-bg-alt) 99%, transparent)
  );
  --theme-home-background:
    radial-gradient(circle at 85% 16%, rgb(var(--t-accent-rgb) / 0.1), transparent 30%),
    linear-gradient(150deg, var(--t-bg), var(--t-bg-alt) 55%, var(--t-bg));
  --theme-map-background: radial-gradient(circle at center, var(--t-surface) 0%, var(--t-bg-alt) 100%);

  /* --- Letters -------------------------------------------------------- */
  /* De kopletter is van het thema; de broodtekst en de utility-letter zijn
     van het product. Een gast leest prijzen, druiven en percentages op elk
     thema in dezelfde letter, en dat is precies de bedoeling. */
  --theme-display-font: var(--t-display-font);
  --theme-body-font: "Space Grotesk", "Manrope", "Helvetica Neue", sans-serif;
  --theme-utility-font: "IBM Plex Mono", ui-monospace, monospace;

  /* --- Vorm ----------------------------------------------------------- */
  /* Eén maat per thema; knop, kaart en telefoon volgen daaruit, met dezelfde
     afgeknipte hoek linksonder die de gastapp altijd had. */
  --theme-control-radius:
    var(--t-radius) var(--t-radius) var(--t-radius)
    calc(var(--t-radius) / 3.6);
  --theme-button-radius:
    calc(var(--t-radius) - 3px) calc(var(--t-radius) - 3px) calc(var(--t-radius) - 3px)
    calc(var(--t-radius) / 4.5);
  --theme-card-radius:
    calc(var(--t-radius) + 4px) calc(var(--t-radius) + 4px) calc(var(--t-radius) + 4px)
    calc(var(--t-radius) / 2.6);
  --theme-phone-radius: calc(var(--t-radius) * 2.1);
  --theme-screen-radius: calc(var(--t-radius) * 1.7);
  --theme-card-shadow: var(--t-shadow, none);
  --theme-title-transform: var(--t-title-transform, none);

  /* --- Waar het logo van de zaak staat -------------------------------- */
  --theme-logo-align: var(--t-logo-align, center);
  --theme-logo-height: var(--t-logo-height, 104px);

  /* --- De donkere sectie in de marketingpagina ------------------------ */
  --theme-experience-background: var(--t-experience-bg);
  --theme-experience-text: var(--t-experience-text);
  --theme-experience-muted: color-mix(in srgb, var(--t-experience-text) 60%, transparent);
  --theme-experience-border: color-mix(in srgb, var(--t-experience-text) 16%, transparent);
  --theme-experience-panel: color-mix(in srgb, var(--t-experience-text) 6%, transparent);
}