/* ============================================================
   TOKENS-CITY — Uit Utrecht ("Boutique Zine")
   IDENTITEITSKLEUR: #C62828 — dit is de kleur die network-breed al actief
   staat via de mu-plugin uit-ds.php (portable DS v4), gelezen uit de
   WP-optie `uit_ds_color` (geverifieerd 02-09-2026: get_option('uit_ds_color')
   = #C62828). Diezelfde mu-plugin injecteert op ELKE pagina een
   `<style id="uit-ds-v4">`-blok dat --color-primary/--color-primary-dark
   met !important overschrijft — dus zelfs zonder dit bestand zou de
   knoppen-kleur al goedstaan. Deze tokens-city.css bepaalt daarnaast de
   overige, hier-wél-doorslaggevende variabelen (--green-700 als "ink/brand"-
   kleur voor borders/chips/footer, --primary-text voor tekst-op-crème) die
   het zine-CSS rechtstreeks gebruikt, buiten --color-primary om (zie
   zine.css r.163-165: "Only --green-900/--gold zijn city-specific").

   Basiskleuren (--cream/--ink/--body/--muted/--card) zijn 1-op-1 overgenomen
   uit het vorige (bespoke) thema `uitutrecht/assets/css/theme.css` voor
   merk-continuïteit. --green-900/--green-950 (donkere identiteit-tint voor
   footer/chips/borders) en --primary-text (leesbaar rood op crème) zijn
   afgeleid van #C62828 volgens hetzelfde patroon als Hilversum: zelfde hue,
   lagere lightness, met dezelfde 14%-verdonkeringsfunctie als uit-ds.php
   (uit_ds_darken) voor de hover-variant.

   Contrast: wit-op-primair (#C62828) ≈ 4.9:1 → on-primary=#FFFFFF (AA,
   normale tekst; dit is dezelfde verhouding als het bestaande thema al
   gebruikte voor wit-op-rood-knoppen). primair-tekst-op-crème: de
   verdiepte tint #C90000 (= de bestaande --red-hover uit het vorige thema)
   geeft ≈5.25:1, een veiligere marge voor lopende tekst.
   ============================================================ */
:root{
  --cream:#F4F3F1;
  --cream-alt:#EAE7E1;
  --cream-alt-border:#ddd8ce;
  --green-900:#371010;
  --green-950:#270B0B;
  --green-700:#C62828;
  --green-700-hover:#AA2222;
  --gold:#E0A33C;
  --gold-hover:#CE922C;
  --ink:#1A1817;
  --body:#3A3733;
  --body-2:#4A4642;
  --muted:#908A80;
  --muted-2:#8A8478;
  --card:#ffffff;
  --card-border:#E6E2D9;
  --container:1260px;

  /* On-dark tekstladder (neutraal, netwerk-breed gelijk) */
  --on-dark:#fdf9ef;
  --on-dark-2:#e9e4d5;
  --on-dark-3:#dfd9c6;
  --on-dark-4:#a9a48f;
  --on-dark-5:#8a8471;
  --input-placeholder-on-dark:#c9c2ac;
  --white:#ffffff;
  --input-bg-soft:#FBF9F5;
  --pill-hover-bg:#e7e0cd;

  /* Identiteit-afgeleide tekstkleuren */
  --on-primary:#FFFFFF;
  --primary-text:#C90000;
  --primary-text-hover:#AD0000;

  /* Phosphor/DS-v4-aliassen */
  --color-primary: var(--green-700);
  --color-primary-light: color-mix(in srgb, var(--green-700) 20%, transparent);
  --color-primary-dark: var(--green-700-hover);

  /* Semantische constanten (alle steden gelijk) */
  --safety-red:#c0392b;
  --fav-active:#c0392b;
}