/* =====================================================================
   Lettertypen, meegeleverd als woff2 onder statisch/lettertypen/.

   Bewust geen Google Fonts-link: geen externe afhankelijkheid op een site
   waar straks nabestaanden foto's achterlaten, en niets wat onderweg naar
   een derde partij lekt. Dezelfde twee letters als Memoria Regie.

   Beide families zijn variabele lettertypen, dus een bestand per subset
   dekt het hele gewichtsbereik. Latin en latin-ext zijn er allebei, met de
   unicode-ranges van Google; een naam met een Poolse of Tsjechische letter
   valt daarmee niet terug op een systeemletter.

   Dit blok staat boven de variabelen omdat @font-face geen var() kan
   gebruiken. De gewichten hieronder zijn wat het bestand kan, geen
   ontwerpkeuze; die staat verderop als --gewicht-*.
   ===================================================================== */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/statisch/lettertypen/cormorant-garamond.latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;  /* latin */
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/statisch/lettertypen/cormorant-garamond.latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;  /* latin-ext */
}
@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url('/statisch/lettertypen/nunito-cursief.latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;  /* latin */
}
@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url('/statisch/lettertypen/nunito-cursief.latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;  /* latin-ext */
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/statisch/lettertypen/nunito.latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;  /* latin */
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/statisch/lettertypen/nunito.latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;  /* latin-ext */
}

/* =====================================================================
   Fundament van de huisstijl.

   Alles onder dit blok gebruikt uitsluitend deze variabelen: geen losse
   kleurcode, geen losse pixelwaarde. Wie later de look aanpast, doet dat
   hier en nergens anders.

   De waarden komen letterlijk uit Memoria Regie
   (apps/desktop/src/renderer/regie.css), zodat portaal en MR familie van
   elkaar zijn. Waar het portaal afwijkt of iets toevoegt staat dat erbij.

   Dit is nog geen ontwerp. De schermen zijn kaal en functioneel; de
   huisstijl wordt later in één keer goed gedaan, en dan bovenop dit blok.
   ===================================================================== */

:root {
  /* --- Huisstijl ---------------------------------------------------- */
  --navy: #22305f;          /* MR --navy. Tekst en koppen. */
  --navy-zacht: #46527a;    /* MR --navy-soft */
  --gedempt: #83879a;       /* MR --muted. Bijschriften. */
  --koraal: #e8846b;        /* MR --coral. Het oranje accent. */
  --koraal-diep: #d5624a;   /* MR --coral-deep */
  --groen: #4f8c62;         /* MR --ok. Bevestiging. */
  --rood: #8c1c2b;          /* MR --t-ritueel. Ook onze foutkleur. */

  /* --- Vlakken en lijnen -------------------------------------------- */
  --creme: #f5f0e8;         /* MR --cream. De pagina zelf. */
  --vlak: #ffffff;          /* MR --surface. Kaarten, tabellen, velden. */
  --papier: #fffdfa;        /* MR --paper */
  --lijn: #e7e0d5;          /* MR --line. Zachte rand, nooit hard zwart. */
  --tint: #eceef6;          /* MR --tint. Rustige achtergrondvulling. */

  /* --- Scenefamilies ------------------------------------------------
     MR kleurt niet per scenetype maar per familie: zeven kleuren, en een
     scenetype hoort bij een familie. Zie de tabel onderaan dit blok.

     Per familie staat hier één accent, letterlijk uit MR. Het pastelvlak
     wordt daaruit gemengd, precies zoals MR het doet
     (.step: 14% op wit, rand 26% op de lijnkleur). Zo is er per familie
     één waarde om aan te draaien in plaats van twee die uit elkaar lopen.
     ------------------------------------------------------------------ */
  --scene-menging-vlak: 14%;
  --scene-menging-rand: 26%;

  --scene-muziek-accent: #c23c9c;   /* magenta */
  --scene-spraak-accent: #1fa0e0;   /* blauw */
  --scene-foto-accent:   #ee8a22;   /* oranje */
  --scene-video-accent:  #2e9e5b;   /* groen */
  --scene-ritueel-accent: #8c1c2b;  /* wijnrood, bewust geen paars: zie hieronder */
  --scene-standby-accent: #8a8f9c;  /* grijs */
  --scene-einde-accent:  #3a4767;   /* donkerblauw */

  --scene-muziek-vlak:   color-mix(in srgb, var(--scene-muziek-accent) var(--scene-menging-vlak), var(--vlak));
  --scene-spraak-vlak:   color-mix(in srgb, var(--scene-spraak-accent) var(--scene-menging-vlak), var(--vlak));
  --scene-foto-vlak:     color-mix(in srgb, var(--scene-foto-accent) var(--scene-menging-vlak), var(--vlak));
  --scene-video-vlak:    color-mix(in srgb, var(--scene-video-accent) var(--scene-menging-vlak), var(--vlak));
  --scene-ritueel-vlak:  color-mix(in srgb, var(--scene-ritueel-accent) var(--scene-menging-vlak), var(--vlak));
  --scene-standby-vlak:  color-mix(in srgb, var(--scene-standby-accent) var(--scene-menging-vlak), var(--vlak));
  --scene-einde-vlak:    color-mix(in srgb, var(--scene-einde-accent) var(--scene-menging-vlak), var(--vlak));

  --scene-muziek-rand:   color-mix(in srgb, var(--scene-muziek-accent) var(--scene-menging-rand), var(--lijn));
  --scene-spraak-rand:   color-mix(in srgb, var(--scene-spraak-accent) var(--scene-menging-rand), var(--lijn));
  --scene-foto-rand:     color-mix(in srgb, var(--scene-foto-accent) var(--scene-menging-rand), var(--lijn));
  --scene-video-rand:    color-mix(in srgb, var(--scene-video-accent) var(--scene-menging-rand), var(--lijn));
  --scene-ritueel-rand:  color-mix(in srgb, var(--scene-ritueel-accent) var(--scene-menging-rand), var(--lijn));
  --scene-standby-rand:  color-mix(in srgb, var(--scene-standby-accent) var(--scene-menging-rand), var(--lijn));
  --scene-einde-rand:    color-mix(in srgb, var(--scene-einde-accent) var(--scene-menging-rand), var(--lijn));

  /* --- Typografie ---------------------------------------------------- */
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --tekst-xs: .75rem;
  --tekst-s: .85rem;
  --tekst-m: 1rem;
  --tekst-l: 1.1rem;
  --tekst-xl: 1.4rem;

  --gewicht-normaal: 400;
  --gewicht-half: 600;
  --gewicht-vet: 800;

  --regelhoogte: 1.5;
  --regelhoogte-kop: 1.2;
  --letterspatie-kop: .01em;

  /* --- Vormtaal ------------------------------------------------------
     Ronde hoeken, ruime witruimte tussen blokken, zachte achtergronden in
     plaats van harde randen.
     ------------------------------------------------------------------ */
  --radius: 13px;           /* MR --radius. Kaarten en vlakken. */
  --radius-knop: 10px;      /* MR --knop-radius */
  --radius-klein: 7px;      /* velden */
  --radius-rond: 999px;     /* pillen */

  --randdikte: 1px;
  --schaduw: 0 1px 2px rgba(30, 35, 60, .05), 0 7px 20px rgba(30, 35, 60, .06);  /* MR --shadow */

  --ruimte-xs: .25rem;
  --ruimte-s: .5rem;
  --ruimte-m: .75rem;
  --ruimte-l: 1.25rem;
  --ruimte-xl: 2rem;
  --ruimte-blok: 2.5rem;    /* tussen twee blokken op een pagina */

  --breedte-pagina: 60rem;
  --breedte-formulier: 30rem;
  --breedte-logo: 12rem;
  --hoogte-logo: 4rem;
}

/* =====================================================================
   Welk scenetype hoort bij welke familie

   Overgenomen uit typeVanSoort() in MR (apps/desktop/src/renderer/regie.tsx).
   Nog niet in gebruik: er is in deze stap geen draaiboek. Het staat hier
   zodat het straks invullen is en niet opnieuw uitzoeken.

     Placeren      -> standby   (grijs)
     Binnenkomst   -> muziek    (magenta)
     Spreker       -> spraak    (blauw)
     Muziek        -> muziek    (magenta)
     Fotoverhaal   -> foto      (oranje)
     Film          -> video     (groen)
     Ritueel       -> ritueel   (wijnrood)
     Defile        -> muziek    (magenta)
     Uitgeleide    -> muziek    (magenta)
     Einde         -> standby   (grijs)

   Ritueel is bewust wijnrood en geen paars, en bewust niet het felle
   live-rood: dat blijft van "de uitzending loopt". MR heeft het juist van
   het magenta van muziek af geschoven omdat die twee op een pastelvlak
   met het blote oog hetzelfde waren.

   --scene-einde-accent is in MR de kleur van de knop "naar beeld: einde",
   niet van een blokje in het draaiboek. Het scenetype Einde valt daar op
   standby terug. De kleur staat hier omdat hij bij de familie hoort.

   ---------------------------------------------------------------------
   Iconen

   Elk scenetype krijgt een icoon, hetzelfde als in MR. Per familie een
   bestand, want de kleuren gaan ook per familie:

     app/statisch/iconen/scene-muziek.svg
     app/statisch/iconen/scene-spraak.svg
     app/statisch/iconen/scene-foto.svg
     app/statisch/iconen/scene-video.svg
     app/statisch/iconen/scene-ritueel.svg
     app/statisch/iconen/scene-standby.svg
     app/statisch/iconen/scene-einde.svg

   Afspraak, gelijk aan MR: viewBox "0 0 24 24", geen fill, stroke
   currentColor, stroke-width 2, ronde uiteinden en hoeken. currentColor
   betekent dat het icoon de kleur van zijn omgeving aanneemt, dus wit op
   een gevuld accentvlak en het accent zelf op een pastelvlak. Zie
   app/statisch/iconen/LEESMIJ.md.

   De iconen zijn nog niet gebouwd.
   ===================================================================== */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--tekst-m);
  line-height: var(--regelhoogte);
  color: var(--navy);
  background: var(--creme);
  -webkit-font-smoothing: antialiased;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ruimte-l);
  padding: var(--ruimte-m) var(--ruimte-xl);
  background: var(--vlak);
  border-bottom: var(--randdikte) solid var(--lijn);
}
header .merk {
  font-family: var(--serif);
  font-size: var(--tekst-l);
  font-weight: var(--gewicht-half);
  text-decoration: none;
  color: inherit;
}
header nav { display: flex; align-items: center; gap: var(--ruimte-l); }
header nav form { margin: 0; }
header .wie { color: var(--gedempt); font-size: var(--tekst-s); }

main {
  max-width: var(--breedte-pagina);
  margin: 0 auto;
  padding: var(--ruimte-xl);
}

h1 {
  font-family: var(--serif);
  font-size: var(--tekst-xl);
  font-weight: var(--gewicht-half);
  line-height: var(--regelhoogte-kop);
  letter-spacing: var(--letterspatie-kop);
  margin: 0 0 var(--ruimte-l);
}
h2 {
  font-family: var(--serif);
  font-size: var(--tekst-l);
  font-weight: var(--gewicht-half);
  line-height: var(--regelhoogte-kop);
  margin: var(--ruimte-blok) 0 var(--ruimte-s);
}

form.staand { max-width: var(--breedte-formulier); }

label {
  display: block;
  margin: var(--ruimte-m) 0 var(--ruimte-xs);
  font-size: var(--tekst-s);
  color: var(--gedempt);
}

input, select, textarea {
  width: 100%;
  padding: var(--ruimte-s) var(--ruimte-s);
  font: inherit;
  color: var(--navy);
  background: var(--papier);
  border: var(--randdikte) solid var(--lijn);
  border-radius: var(--radius-klein);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--koraal);
  background: var(--vlak);
}
input[type="file"] { padding: var(--ruimte-xs) 0; border: 0; background: none; }

button {
  padding: var(--ruimte-s) var(--ruimte-l);
  font: inherit;
  font-weight: var(--gewicht-half);
  cursor: pointer;
  color: var(--vlak);
  background: var(--navy);
  border: var(--randdikte) solid var(--navy);
  border-radius: var(--radius-knop);
}
button:hover { background: var(--navy-zacht); border-color: var(--navy-zacht); }
button.kalm { color: var(--navy); background: var(--vlak); border-color: var(--lijn); }
button.kalm:hover { background: var(--tint); border-color: var(--lijn); }

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--ruimte-s);
  background: var(--vlak);
  border: var(--randdikte) solid var(--lijn);
  border-radius: var(--radius);
  overflow: hidden;
}
th, td {
  text-align: left;
  padding: var(--ruimte-s) var(--ruimte-m);
  border-bottom: var(--randdikte) solid var(--lijn);
}
tr:last-child td { border-bottom: 0; }
th {
  font-size: var(--tekst-s);
  font-weight: var(--gewicht-half);
  color: var(--gedempt);
}

.melding {
  padding: var(--ruimte-m) var(--ruimte-l);
  border-radius: var(--radius);
  margin-bottom: var(--ruimte-l);
  border: var(--randdikte) solid transparent;
}
.melding.fout {
  color: var(--rood);
  background: color-mix(in srgb, var(--rood) var(--scene-menging-vlak), var(--vlak));
  border-color: color-mix(in srgb, var(--rood) var(--scene-menging-rand), var(--lijn));
}
.melding.goed {
  color: var(--groen);
  background: color-mix(in srgb, var(--groen) var(--scene-menging-vlak), var(--vlak));
  border-color: color-mix(in srgb, var(--groen) var(--scene-menging-rand), var(--lijn));
}

.leeg { color: var(--gedempt); font-style: italic; }

.knoppen {
  display: flex;
  gap: var(--ruimte-m);
  align-items: center;
  margin-top: var(--ruimte-l);
}

.logo { max-height: var(--hoogte-logo); max-width: var(--breedte-logo); }

.link-vak { display: flex; gap: var(--ruimte-s); margin-top: var(--ruimte-s); }
.link-vak input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--tekst-s);
}

.terug {
  display: inline-block;
  margin-bottom: var(--ruimte-l);
  color: var(--gedempt);
}

p.uitleg { color: var(--gedempt); font-size: var(--tekst-s); }