/*
 * Ontwerptokens - Hot Apple Gin CRM
 *
 * Elke waarde hier komt LETTERLIJK uit docs/ontwerp/ONTWERP.md §3 en §4 en uit
 * de referentiebestanden in docs/ontwerp/schermen/. Er is niets afgerond naar
 * een 4- of 8-punts raster en er is geen enkele waarde "netter" gemaakt: waar
 * de referentie 12.5px zegt, staat hier 12.5px.
 *
 * Dit bestand is de enige plek waar een kleur of een maat wordt vastgelegd.
 * Staat iets hier niet in, dan is dat een ontwerpvraag en geen vrijheid.
 */

:root {
  /* ---- Kleur (§3) ------------------------------------------------------ */
  --gold: #b48e47; /* het gemeten goud van het logo (MERK-LOGO.md par. 1) */
  --gold-light: #d9bb7a;
  --bg: #0b0a08;
  --surface: #161310;
  --ink: #f4efe4;
  --muted: #948c7c;
  /* Was #6b6558: te licht grijs op donker voor lopende tekst (BOUWOPDRACHT-8
     par. 6.3). Een trap omhoog, nog steeds duidelijk onder --muted. */
  --muted-2: #857e6e;
  --warn: #c9622f;
  --ok: #5f8f5a;
  --line: rgba(180, 142, 71, 0.2);
  --line-2: rgba(255, 255, 255, 0.06);

  /*
   * Afgeleide kleuren uit de referentie. Ze staan niet in de tabel van §3 maar
   * wel letterlijk in de bestanden; ze hier benoemen is beter dan ze verspreid
   * in de componenten te herhalen.
   */
  --on-gold: #12100b; /* tekst en iconen op een gouden vlak */
  --ink-dim: #5c5648; /* uitgeschakelde tekst, doorgestreepte taak */
  /* Was #4f4a3f: onder de leesgrens (par. 6.3). Zachtste trap, maar leesbaar. */
  --ink-faint: #5f594b; /* de zachtste regel: voettekst, slotregel */
  --gold-soft: #e8d5a8;
  --tagline: #b3aa99; /* de vaste tekst op het inlogscherm (§12) */ /* tekst op actief goud: chip, segment, melding */
  --warn-text: #e5a883; /* tekst in een oranje melding */
  --warn-strong: #f0b48c; /* het vette begin van een oranje melding */
  --warn-pill: #e08a5a; /* tekst in een oranje label */
  --ok-pill: #8fbc8a; /* tekst in een groen label */
  --page: #080706; /* achtergrond buiten het schermkader */

  /* Alleen op de computer (§9, Bureau.html). */
  --side: #100e0b; /* de vaste navigatiekolom links */
  --ink-nav: #f0e2c4; /* tekst van de actieve bestemming */
  --ink-act: #c9c1b0; /* tekst op een rustige knop */

  /* ---- Vlakken en randen ---------------------------------------------- */
  --gold-a10: rgba(180, 142, 71, 0.1);
  --gold-a13: rgba(180, 142, 71, 0.13);
  --gold-a14: rgba(180, 142, 71, 0.14);
  --gold-a15: rgba(180, 142, 71, 0.15);
  --gold-a16: rgba(180, 142, 71, 0.16);
  --gold-a18: rgba(180, 142, 71, 0.18);
  --gold-a26: rgba(180, 142, 71, 0.26);
  --gold-a28: rgba(180, 142, 71, 0.28);
  --gold-a30: rgba(180, 142, 71, 0.3);
  --gold-a32: rgba(180, 142, 71, 0.32);
  --gold-a34: rgba(180, 142, 71, 0.34);
  --gold-a35: rgba(180, 142, 71, 0.35);
  --warn-a07: rgba(201, 98, 47, 0.07);
  --warn-a11: rgba(201, 98, 47, 0.11);
  --warn-a16: rgba(201, 98, 47, 0.16);
  --warn-a30: rgba(201, 98, 47, 0.3);
  --warn-a32: rgba(201, 98, 47, 0.32);
  --warn-a40: rgba(201, 98, 47, 0.4);
  --warn-a65: rgba(201, 98, 47, 0.65);
  --ok-a16: rgba(95, 143, 90, 0.16);
  --ok-a30: rgba(95, 143, 90, 0.3);
  --white-a035: rgba(255, 255, 255, 0.035);
  --white-a04: rgba(255, 255, 255, 0.04);
  --white-a045: rgba(255, 255, 255, 0.045);
  --white-a05: rgba(255, 255, 255, 0.05);
  --white-a06: rgba(255, 255, 255, 0.06);
  --white-a07: rgba(255, 255, 255, 0.07);
  --white-a08: rgba(255, 255, 255, 0.08);
  --white-a10: rgba(255, 255, 255, 0.1);
  --white-a16: rgba(255, 255, 255, 0.16);
  --white-a18: rgba(255, 255, 255, 0.18);

  /* Verlopen, letterlijk overgenomen. */
  --grad-gold-btn: linear-gradient(180deg, #c39c4c, #9d7a33);
  --grad-progress: linear-gradient(90deg, #8d6d2c, #d9bb7a);
  --grad-hero: radial-gradient(130% 130% at 100% 0%, rgba(180, 142, 71, 0.2), rgba(180, 142, 71, 0) 62%);
  --shadow-gold-btn: 0 6px 20px rgba(180, 142, 71, 0.22);
  --shadow-fab: 0 10px 26px rgba(0, 0, 0, 0.55);

  /*
   * De tekstschaal (§16.5).
   *
   * Alle lettergroottes hieronder staan in `rem` en worden vermenigvuldigd met
   * deze factor. Twee dingen werken daardoor:
   *
   *   - `rem` volgt de basislettergrootte van de browser, dus wie zijn toestel
   *     of browser op grotere letters heeft staan, krijgt grotere letters;
   *   - de factor geeft ons een knop om dat later in de app zelf te kunnen
   *     bijstellen zonder achttien waarden aan te raken.
   *
   * MATEN VAN VLAKKEN BLIJVEN IN PUNTEN. Een knop van 52 punten blijft 52
   * punten: dat is de 44-punts-regel uit afspraak 1, en die gaat over een
   * vingertop, niet over leesbaarheid. Meeschalen zou de knop op de grootste
   * instelling van het scherm af duwen.
   *
   * Of de tekstinstelling van iOS hier daadwerkelijk in doorwerkt, is een
   * TESTPUNT en geen aanname - het staat als punt 6 op de toestellijst.
   */
  --tekstschaal: 1;

  /* ---- Letters (§4) ---------------------------------------------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif;

  /*
   * BESLIST (AANVULLING-2 §5): Playfair Display, zelf meegeleverd.
   *
   * Het bestand staat in /app/letters/ en wordt daar geladen - geen Google
   * Fonts, geen enkele externe verbinding. Gemeten: de pagina doet nul
   * verzoeken buiten het eigen adres, en de letterbreedte wijkt af van elke
   * terugvalletter, dus er wordt echt Playfair getekend en niet Georgia.
   *
   * De rest van de stapel blijft eronder staan voor het geval het bestand niet
   * laadt. De referentiebestanden hebben daarnaast een regel `.screen .sf` met
   * Iowan Old Style / Palatino, die daar door hogere specificiteit won; die
   * hoort bij die losse pagina's en niet bij de app.
   */
  --font-serif: 'Playfair Display', 'Didot', 'Bodoni MT', 'Times New Roman', Georgia, serif;

  /* Groottes. De halve punten zijn geen slordigheid maar staan zo in de bron. */
  --fs-title: calc(1.5625rem * var(--tekstschaal)); /* schermtitel, §4: 25-31 */
  --fs-title-hero: calc(1.8125rem * var(--tekstschaal)); /* eventnaam op de brede kaart (Main.html .sf) */
  --fs-title-greet: calc(1.625rem * var(--tekstschaal)); /* begroeting op het beginscherm */

  /*
   * BEVESTIGD (AANVULLING-2 §5): "Tegelmaten: 114. De referentiebestanden zijn
   * leidend; 120 was een eerdere versie die niet meer bestaat."
   *
   * Datzelfde geldt voor de drie andere maten die dezelfde kant op krimpen: het
   * getal 29 (niet 31), binnenmarge 13 (niet 14) en tussenruimte 8 (niet 12).
   */
  --fs-num: calc(1.8125rem * var(--tekstschaal)); /* groot getal op een tegel, Main.html .num */
  --fs-num-sum: calc(1.5625rem * var(--tekstschaal)); /* getal in een samenvattingsblok (Orders) */
  --fs-num-order: calc(1.375rem * var(--tekstschaal)); /* bedrag op een orderkaart */
  --fs-navtitle: calc(1.125rem * var(--tekstschaal));
  --fs-cardhead: calc(1rem * var(--tekstschaal));
  --fs-body: calc(0.9375rem * var(--tekstschaal));
  --fs-body-sm: calc(0.875rem * var(--tekstschaal));
  --fs-list: calc(0.90625rem * var(--tekstschaal));
  --fs-support: calc(0.8125rem * var(--tekstschaal));
  --fs-support-sm: calc(0.78125rem * var(--tekstschaal));
  --fs-meta: calc(0.71875rem * var(--tekstschaal));
  --fs-meta-sm: calc(0.6875rem * var(--tekstschaal));
  --fs-eyebrow: calc(0.6875rem * var(--tekstschaal));
  --fs-tiny: calc(0.65625rem * var(--tekstschaal));
  --fs-micro: calc(0.59375rem * var(--tekstschaal));

  /*
   * De verantwoordingsregel (Bouwopdracht 1 §2.4): "Vastgelegd door ... - ... - ...".
   * Op 12 punten in plaats van de 10,5 waar hij eerst op uitkwam. Die regel is
   * er om later te kunnen navertellen wie iets heeft vastgelegd, en dan moet hij
   * te lezen zijn door de mensen die dat moeten kunnen - niet alleen door wie
   * goede ogen heeft.
   *
   * De voettekst op het inlogscherm blijft wel 10,5 (AANNAMES A6): die hoeft
   * niemand na te vertellen.
   */
  --fs-verantwoording: calc(0.75rem * var(--tekstschaal));

  --lh-body: 1.45;
  --lh-title: 1.05;
  --lh-greet: 1.14;
  --lh-banner: 1.35;

  --ls-title: -0.01em;
  --ls-tight: -0.005em;
  --ls-eyebrow: 0.16em;
  --ls-brand: 0.22em;
  --ls-pill: 0.02em;

  /* ---- Maten (§5) ------------------------------------------------------ */
  --pad-x: 20px; /* zijmarge van elk scherm */

  /*
   * Veilige zone (§2). De referentie hardcodeert 47 boven en 34 onder om de
   * notch en de thuisstreep na te bootsen in een gewone browser. De app doet
   * dat NIET hard: §2 vraagt uitdrukkelijk om env(), zodat het klopt op elk
   * toestel - 47 op een iPhone 13, 59 op een 16 Pro, 0 op een computer.
   *
   * De ondergrens van 34 onderaan blijft wel staan: "onder de onderste 34
   * punten ligt nooit een knop" is een ontwerpregel, geen toestelmaat, en die
   * geldt dus ook waar env() nul teruggeeft.
   */
  --safe-top: env(safe-area-inset-top, 0px);
  /* AANVULLING-30 §1/§18.58: env(safe-area-inset-*) woont ALLEEN hier. De rest
     van de app roept deze tokens aan; nergens anders staat nog een getal naast
     safe-area-inset. --safe-onder is de kale onderrand; --safe-bottom houdt de
     ontwerp-ondergrens van 34 punten (onder de laatste 34 ligt nooit een knop). */
  --safe-onder: env(safe-area-inset-bottom, 0px);
  --safe-bottom: max(34px, var(--safe-onder));
  /*
   * AANVULLING-28 §1: links en rechts waren nergens gerespecteerd. Bij het
   * kantelen liep de inhoud onder de ronde hoeken en het eilandje door. Deze
   * twee tokens dragen de zijranden; ze staan hier zodat ze op één plek te
   * simuleren zijn (een proef zet ze op een notch-waarde).
   */
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  --h-appbar: 58px;
  --h-nav: 56px;
  /* AANVULLING-30 §1: de onderbalk en bovenbalk als EEN maat, op EEN plek
     (§18.58). De icoonrij van de tabbalk blijft 56 hoog; de veilige rand is
     opvulling ONDER de iconen, binnen dezelfde balk (de iconen schuiven niet
     omhoog). Elk scherm en de zwevende knop rekenen hiermee, nooit met een
     eigen getal. --bovenbalk is het parallel voor de kopbalk. */
  --onderbalk: calc(56px + var(--safe-onder));
  /* De zwevende knop hangt dit stuk boven de onderbalk (een maat, een plek). */
  --fab-boven-onderbalk: 16px;
  --bovenbalk: calc(var(--h-appbar) + var(--safe-top));
  --h-btn: 52px;
  --h-btn-sm: 46px;
  --h-chip: 32px;
  --h-seg: 34px;
  --h-pill: 24px;
  --h-tile: 114px; /* Main.html .tile, bevestigd in AANVULLING-2 §5 */
  --pad-tile: 13px; /* Main.html .tile padding */
  --h-slim: 60px;
  --h-act: 52px;
  --h-fab: 54px;

  --r-tile: 18px;
  --r-hero: 20px;
  --r-card: 16px;
  --r-order: 17px;
  --r-btn: 14px;
  --r-banner: 13px;
  --r-seg: 9px;
  --r-segs: 12px;
  --r-mark: 8px;
  --r-box: 7px;
  --r-round: 999px;

  --gap-tile: 8px; /* Main.html .grid gap */
  --gap-chip: 8px;
  --gap-row: 12px;

  /*
   * §2 en afspraak 1: alles wat je aanraakt is minstens 44 bij 44 punten.
   * Componenten die visueel kleiner zijn (een aankruisvakje van 22, een
   * icoonknop van 34) krijgen hun raakvlak via deze maat, niet via hun rand.
   */
  --tap-min: 44px;

  /*
   * De temperatuurkleuren (AANVULLING-21 par. 4). DE ENIGE PLEK in de app
   * waar deze kleuren voorkomen; rood betekent hier "goed" (heet = klant
   * die nu bestelt), dus nergens anders rood op een relatiescherm. Het
   * woord staat altijd naast de kleur.
   */
  --temp-ijskoud: #a8d8e8;
  --temp-koud: #5b9bd5;
  --temp-lauw: #d9a441;
  --temp-warm: #e07b39;
  --temp-heet: #d64545;
  /* AANVULLING-22 par. 4: leverancier is paars - groen betekent hier al
     "op tijd" en "gelukt", en paars ligt zichtbaar buiten de warm-koudschaal. */
  --temp-leverancier: #9b7bd4;
  --temp-ijskoud-a18: rgba(168, 216, 232, 0.18);
  --temp-koud-a18: rgba(91, 155, 213, 0.18);
  --temp-lauw-a18: rgba(217, 164, 65, 0.18);
  --temp-warm-a18: rgba(224, 123, 57, 0.18);
  --temp-heet-a18: rgba(214, 69, 69, 0.18);
  --temp-leverancier-a18: rgba(155, 123, 212, 0.18);
}