/* De tokenbibliotheek van Heare — de enige plek op het web waar een kleur, een
   radius of een schaduw een WAARDE krijgt.

   `styles.css`, `landing.css` en `verhalen.css` consumeren deze variabelen en
   definiëren er zelf geen enkele. Dat is niet netheid maar de reparatie van een echte
   fout: `--ebony` betekende `#1C1840` in styles.css en `#2B2742` in landing.css, en
   twee regels schreven `var(--ebony, #2b2742)` — de TERUGVAL was de kleur van het
   andere bestand.

   De canonieke namen staan in `docs/design.md`; hier staan ze in kebab-case. Eén naam
   per begrip, drie spellingen: `cardBeige` in Swift en Kotlin, `--card-beige` hier.

   ⚠️ Dit bestand met de hand bijwerken betekent design.md OOK bijwerken. Doe je dat
   niet, dan wordt `node DesignVerification/tokens.mjs` rood — dat is de bedoeling. */

:root {
  /* Lettertypen. Cal Sans draagt de titels, al het andere is het systeemfont
     (clientbesluit 2026-07-26). */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Cal Sans", var(--font-body);

  /* Beweging */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  /* Vorm. Dezelfde vier waarden als HeareRadius op iOS en Android. */
  --radius-round: 1000px;
  --radius-card: 20px;
  --radius-button: 10px;
  --radius-control: 16px;
  --radius-section: clamp(38px, 7vw, 72px);

  /* Ruimte. `--screen-margin` staat vast op 25 (app en recorder); `--page` schaalt
     mee met het venster (de site). Twee contexten, twee namen — geen drift. */
  --screen-margin: 25px;
  --page: clamp(20px, 5vw, 72px);

  /* Schaduw */
  --shadow-card: 0 24px 80px rgba(28, 24, 64, 0.14);
  --shadow-accent: 0 18px 46px rgba(108, 92, 255, 0.32);

  /* Oppervlakken */
  --room:                   #ffffff;
  --card:                   #ffffff;
  --card-beige:             #fff3e7;
  --cover-beige:            #fff3e7;
  --playback-room:          #2b2742;

  /* Merk */
  --brand-purple:           #6c5cff;
  --brand-purple-deep:      #4c3fd5;
  --brand-purple-wash:      #ede9ff;
  --on-accent:              #ffffff;

  /* Inkt */
  --title-ink:              #1c1840;
  --text-primary:           #2b2742;
  --text-secondary:         #6e6a6a;
  --person-meta:            #6b6878;
  --text-medium:            #5b616d;
  --text-low:               #c3c6cc;
  --text-high-on-glass:     #0a0c11;
  --ink-on-light:           #2b2742;

  /* Glas en haarlijnen */
  --glass-secondary-fill:   rgba(0, 0, 0, 0.05);
  --outline-soft:           rgba(0, 0, 0, 0.05);
  --outline-faint:          rgba(0, 0, 0, 0.03);

  /* Knoppen */
  --primary-button-fill:    #2b2742;
  --apple-button-fill:      #000000;
  --apple-button-ink:       #ffffff;
  --google-button-fill:     #ececf0;

  /* Schaduwkleuren */
  --inner-shadow-dark:      rgba(0, 0, 0, 0.08);
  --shadow:                 rgba(0, 0, 0, 0.08);

  /* Status */
  --success:                #308f5c;
  --destructive:            #ba2e2c;

  /* Illustratie — vast, want ze zitten op artwork */
  --story-blue:             #88c5fe;
  --cover-blue:             #72c8fe;
  --story-purple:           #9892ec;
  --tile-amber:             #f6b73c;
  --tile-blue:              #4fa3e3;
  --accent-soft:            #ffc9ae;
  --tile-taupe:             #c9bba9;

  /* Statuslabels */
  --chip-peach:             #fce3d9;
  --chip-peach-ink:         #d5481f;
  --chip-mint:              #eaf6ee;
  --chip-mint-ink:          #2c7a4b;
  --chip-ice:               #e2f0fa;
  --chip-ice-ink:           #2e93c9;

  /* Meelezen — alleen de recorder gebruikt deze */
  --reading-ink:            #1c1840;
  --reading-ink-upcoming:   rgba(28, 24, 64, 0.35);
  --reading-surface:        #eaf3fe;
  --ra-word-read:           #1c1840;
  --ra-word-upcoming:       rgba(28, 24, 64, 0.55);
  --toggle-bg:              rgba(28, 24, 64, 0.06);
  --toggle-ink:             rgba(28, 24, 64, 0.55);
}

/* ── Donker ──────────────────────────────────────────────────────────────────
   Alleen de tokens die ECHT omdraaien. Een token zonder regel hieronder staat
   met opzet vast: het oppervlak eronder verandert ook niet. */

html.theme-dark {

  /* Oppervlakken */
  --room:                   #1d1b38;
  --card:                   #19172f;
  --card-beige:             rgba(108, 92, 255, 0.15);

  /* Inkt */
  --title-ink:              #ffffff;
  --text-primary:           #ffffff;
  --text-secondary:         rgba(255, 255, 255, 0.5);
  --person-meta:            rgba(255, 255, 255, 0.5);
  --text-medium:            rgba(255, 255, 255, 0.7);
  --text-low:               rgba(255, 255, 255, 0.35);
  --text-high-on-glass:     #ffffff;

  /* Glas en haarlijnen */
  --glass-secondary-fill:   rgba(255, 255, 255, 0.08);
  --outline-soft:           rgba(255, 255, 255, 0.08);
  --outline-faint:          rgba(255, 255, 255, 0.06);

  /* Knoppen */
  --primary-button-fill:    rgba(255, 255, 255, 0.1);
  --apple-button-fill:      #ffffff;
  --apple-button-ink:       #000000;
  --google-button-fill:     #131314;

  /* Schaduwkleuren */
  --inner-shadow-dark:      rgba(0, 0, 0, 0.2);
  --shadow:                 rgba(0, 0, 0, 0.35);

  /* Status */
  --success:                #4cc98a;
  --destructive:            #ff6b66;

  /* Meelezen — alleen de recorder gebruikt deze */
  --reading-ink:            #e0e0e0;
  --reading-ink-upcoming:   rgba(219, 219, 219, 0.2);
  --reading-surface:        rgba(108, 92, 255, 0.12);
  --ra-word-read:           #ffffff;
  --ra-word-upcoming:       rgba(255, 255, 255, 0.5);
  --toggle-bg:              rgba(255, 255, 255, 0.08);
  --toggle-ink:             rgba(255, 255, 255, 0.55);
  --panel-tint:             rgba(108, 92, 255, 0.15);
}