/*
 * Design tokens — the only file that decides what MarktAmigo looks like.
 *
 * The brand landed here in phase 8, exactly as phase 1 planned: app.css names
 * tokens and nothing else, so recolouring the whole application happens in this
 * file. Four brand colours came from the designer:
 *
 *     #D6E499 lichtgroen (hoofdkleur)   #939D7A donkergroen
 *     #F8FCE1 wit                       #EF9562 oranje
 *
 * None of the four can carry white text — they measure 1.36:1, 2.86:1, 1.05:1
 * and 2.30:1 against white, where a control needs 3:1 and text needs 4.5:1.
 * So the four are given the jobs they can actually do — ground, selection,
 * rules, highlight — and two darker derivatives were pulled from the same two
 * hues for the work they cannot do: text and the primary button.
 *
 * The split that follows from that is worth stating, because it is the whole
 * design: GREEN IS THE ROOM, and the one warm colour is reserved. Selection is
 * lichtgroen, so a chosen chip glows rather than shouts. Buttons are the dark
 * green. Links are the dark orange — the only warm thing on the page, which is
 * what makes them findable in a screen that is otherwise entirely green.
 *
 * Sizing note: this is used one-handed, outdoors, on a market stall. Touch
 * targets are 48px minimum and the base font is 17px rather than the usual 16,
 * because the screen is often at arm's length in daylight. Pale colours wash
 * out in that light, which is the second reason text and buttons are dark: on
 * a kraam in July the brand's own pastels are the hardest palette there is.
 */

/* ---- Fonts ------------------------------------------------------------- *
 * Self-hosted, because the CSP is `font-src 'self'` and because a trader with
 * no signal has to get the letters out of the service worker cache. Built by
 * tools/bouw-fonts.py, which also re-spaces the Poppins digits — neither face
 * ships a `tnum` feature, so `tabular-nums` would otherwise do nothing and a
 * total would jump width as it changed. Every numeral in the app is Poppins;
 * Fredoka sets headings and the wordmark and never a column of money.         */

@font-face {
    font-family: "Fredoka";
    src: url("/assets/fonts/fredoka-var.woff2") format("woff2");
    font-weight: 300 700;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("/assets/fonts/poppins-400.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("/assets/fonts/poppins-500.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("/assets/fonts/poppins-600.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
}

:root {
    /* ---- Colour: raw palette ------------------------------------------- */

    /* The four as delivered, kept as the record of what the brand is. Three
       of them are aliased below; donkergroen has no job in the light interface
       because 2.86:1 is too little for a rule and far too little for text —
       it lives in the wordmark, which is an image and exempt. */
    --merk-lichtgroen:  #d6e499;
    --merk-donkergroen: #939d7a;
    --merk-wit:         #f8fce1;
    --merk-oranje:      #ef9562;

    /* The same two hues, carried far enough to be readable. The contrast
       against white is in the comment: that is why each one exists. */
    --groen-900: #2e3324;                    /* 13.0 — text               */
    --groen-700: #4a5239;                    /* 8.21 — primary button      */
    --groen-600: #5c6647;                    /* 6.09 — quiet text          */
    --groen-500: #7c8763;                    /* 3.82 — input borders       */
    --groen-200: #c3d580;                    /* edge of a selected chip    */
    --groen-100: var(--merk-lichtgroen);     /* 1.36 — selection only      */
    --groen-050: #eef3d8;                    /* quiet fills                */
    --groen-025: var(--merk-wit);            /* 1.05 — the page            */
    --groen-015: #e2e9c9;                    /* hairlines on white         */

    --oranje-700: #a64e1f;                   /* 5.63 — links               */
    --oranje-600: #c25f2a;                   /* 4.23 — focus ring          */
    --oranje-500: var(--merk-oranje);        /* 2.30 — dark mode only      */

    --kleur-wit: #ffffff;

    /* Red stays red and green stays green. The orange above sits between the
       two, so both are pulled away from it: the red cooler, the green deeper
       than the brand sage, or "let op" and "gelukt" start to read as "druk
       hier". Colour never carries meaning alone here, but it should not lie. */
    --kleur-fout-600: #b3261e;
    --kleur-fout-050: #fbeae8;
    --kleur-goed-600: #2e6b45;
    --kleur-goed-050: #e2efdb;

    /* ---- Colour: semantic roles ---------------------------------------- *
     *
     * Wit is het werkblad, groen is het paneel. Dat was tot voor kort andersom
     * -- een groene grond met witte kaarten -- en het is omgedraaid zodat de
     * ingelogde app dezelfde twee vlakken heeft als het scherm waar je binnen
     * komt: een diepgroene zijkant en wit om op te werken.
     *
     * Let op de richting, want die geldt in allebei de standen: een inzetje
     * ligt altijd één stap richting het licht ten opzichte van het paneel
     * eronder. Overdag is een paneel lichtgroen en een inzetje wit; 's avonds
     * is een paneel bijna zwart en een inzetje een tint grijzer. Wie hier een
     * kleur bijzet, zet hem in die volgorde.                                  */
    --achtergrond:        var(--kleur-wit);
    --vlak:               var(--groen-050);
    --vlak-rustig:        var(--kleur-wit);
    --rand:               var(--groen-015);
    --rand-sterk:         var(--groen-500);
    --tekst:              var(--groen-900);
    --tekst-zacht:        var(--groen-600);

    /* Waar je in typt. Apart van --vlak-rustig, want een veld hoort wit te zijn
       op een paneel én op het werkblad, en die twee zijn niet dezelfde kleur. */
    --invoer:             var(--kleur-wit);

    /* De zijbalk. Eigen kleuren, want als enige vlak in de app draagt hij het
       diepe groen -- hetzelfde vlak als op het inlogscherm, op dezelfde plek.
       Wit erop meet 8,21:1, dus de tekst erop kan alles. */
    --zijbalk:            var(--groen-700);
    --op-zijbalk:         var(--kleur-wit);
    --op-zijbalk-zacht:   #d1d4ce;              /* 5,46 op de balk           */
    --zijbalk-actief:     var(--groen-600);     /* waar je staat             */
    --zijbalk-rand:       var(--groen-600);     /* de streepjes in de balk   */
    --zijbalk-accent:     var(--groen-100);     /* het icoon waar je staat   */

    /* The primary action. Green, because the screen it sits on is green and a
       trader is looking for the one thing to press, not the prettiest thing. */
    --accent:             var(--groen-700);
    --accent-donker:      #3c432f;
    /* Eén stap dieper dan een paneel, en niet lichter: dit is de zachte kant
       van het accent -- de pil op een tegel, het merkje op een categorie -- en
       die moet zich aftekenen tegen het lichtgroen waar hij op ligt. Toen het
       paneel wit was, was --groen-050 daarvoor precies goed; nu is dat het
       paneel zelf en zou de pil verdwijnen. */
    --accent-zacht:       var(--groen-015);
    --op-accent:          var(--kleur-wit);

    /* Selection is not action. A chosen chip or tile is lit, not filled with
       the button colour — otherwise every screen looks like it has ten
       primary buttons on it. */
    --selectie:           var(--groen-100);
    --selectie-rand:      var(--groen-200);
    --op-selectie:        var(--groen-900);

    /* De gekleurde helft van de toegangskaart.
     *
     * Als enige vlak in de app volgt dit niet het lichte of donkere schema: het
     * is in allebei het diepe groen met wit erop. Dat is geen uitzondering om
     * de uitzondering -- het woordmerk is getekend in de sage van het merk en
     * heeft een donkere ondergrond nodig, en dit vlak is de enige plek waar het
     * los op een kleur ligt. Zou het 's avonds meelopen naar het lichtgroen,
     * dan viel het merk weg op precies het scherm waar iemand de app voor het
     * eerst ziet. 8,21:1 voor wit, dus de tekst erop kan alles. */
    --toegangvlak:        var(--groen-700);
    --op-toegangvlak:     var(--kleur-wit);

    /* The only warm colour in the interface, so a link is findable. */
    --link:               var(--oranje-700);
    --link-donker:        #8c4019;

    /* Waar iets overheen ligt: de lade van het menu, de mand als blad. Getint
       met de inkt en niet met zwart, om dezelfde reden als de schaduwen. */
    --waas:               rgb(46 51 36 / 0.45);

    --fout:               var(--kleur-fout-600);
    --fout-zacht:         var(--kleur-fout-050);

    /* Een waarschuwing: er is niets stuk, maar er moet wel iets gebeuren.
     *
     * Dit is de ene uitzondering op "oranje is voor links". Die regel gaat over
     * oranje tékst tussen zwarte tekst -- dat is wat een link vindbaar maakt.
     * Hier is oranje een vlak, en op zo'n vlak staat geen link; de knop erin is
     * een knop. Rood zou zeggen dat er iets kapot is, en dat is het niet.      */
    --waarschuwing:       var(--oranje-700);   /* 5,63 op wit                */
    --waarschuwing-zacht: #fdf0e6;
    --goed:               var(--kleur-goed-600);
    --goed-zacht:         var(--kleur-goed-050);
    --focusring:          var(--oranje-600);

    /* ---- Typography ----------------------------------------------------- *
     * Fredoka for headings: a rounded geometric that rhymes with the drawn
     * wordmark without imitating it. Poppins for everything else. Both are
     * self-hosted above; the fallbacks matter, because they are what a trader
     * sees on the very first paint before the cache is warm.                */
    --lettertype:      "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --lettertype-kop:  "Fredoka", "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --lettertype-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --tekst-xs:  0.8125rem;
    --tekst-s:   0.9375rem;
    --tekst-m:   1.0625rem;   /* 17px base */
    --tekst-l:   1.25rem;
    --tekst-xl:  1.5rem;
    --tekst-2xl: 1.875rem;

    /* Poppins has short ascenders and descenders, so the lines need a little
       more air than the old system stack did to stay readable outdoors. */
    --regelhoogte:       1.62;
    --regelhoogte-kop:   1.18;

    /* Poppins is a static family: 550 and 680 do not exist and the browser
       would synthesise them, which smears the outline. Whole steps only. */
    --gewicht-normaal:   400;
    --gewicht-medium:    500;
    --gewicht-vet:       600;

    /* ---- Spacing (4px scale) -------------------------------------------- */
    --ruimte-1: 0.25rem;
    --ruimte-2: 0.5rem;
    --ruimte-3: 0.75rem;
    --ruimte-4: 1rem;
    --ruimte-5: 1.5rem;
    --ruimte-6: 2rem;
    --ruimte-7: 3rem;

    /* ---- Shape ---------------------------------------------------------- */
    --radius-s: 6px;
    --radius-m: 10px;
    --radius-l: 16px;
    --radius-xl: 20px;

    /* Shadows are tinted with the ink rather than pure black: a grey shadow
       on a warm ground is the one thing that makes a warm palette look cold. */
    --schaduw-s: 0 1px 2px rgb(46 51 36 / 0.07);
    --schaduw-m: 0 2px 8px rgb(46 51 36 / 0.10);

    /* A panel is a sheet lying on the page, and the two tokens below are what
       says so. In daylight the shadow does the whole job and a border on top of
       it only draws a box; after dark a shadow on a dark ground is invisible,
       so the hairline takes over. Both are set here rather than in a component,
       because "how does a raised surface read" is one decision. */
    --paneel-rand:    transparent;
    --schaduw-paneel: 0 1px 2px rgb(46 51 36 / 0.04), 0 6px 20px rgb(46 51 36 / 0.06);

    /* ---- Layout --------------------------------------------------------- *
     * Three widths, because a screen holds three kinds of thing. Prose and
     * forms are read, so they keep the 44rem column that a line of text wants.
     * A list or a report is scanned, and 64rem is as wide as a row can get
     * before the eye loses the way back to the left. The work surface -- the
     * wall of products with the basket beside it -- is the one thing that
     * earns everything the screen has.                                       */
    --breedte-werkblad: 82rem;
    --breedte-pagina:   64rem;
    --breedte-inhoud:   44rem;
    --breedte-smal:     26rem;
    --raakvlak:         48px;   /* minimum touch target */
}

/* Dark mode follows the device. Only the semantic roles are swapped, so every
   component inherits the change without knowing about it.
 *
 * The brand inverts rather cleanly here: in daylight the dark green is the
 * voice and the pastel is the ground, and after dark those trade places. The
 * hoofdkleur finally gets to be the loudest thing on the screen, and the
 * orange needs no darkening because the ground does that work. */
@media (prefers-color-scheme: dark) {
    :root {
        --achtergrond:   #171a12;
        --vlak:          #1f2419;
        --vlak-rustig:   #272d1e;
        --rand:          #333b27;

        /* De rollen die overdag omgedraaid zijn, staan 's avonds precies waar
           ze stonden: donker is al donkere grond met iets lichtere panelen, en
           daar valt niets om te draaien. */
        --invoer:           #1f2419;
        --zijbalk:          #272d1e;
        --op-zijbalk:       #edf2dc;
        --op-zijbalk-zacht: #b4be99;
        --zijbalk-actief:   #1f2419;
        --zijbalk-rand:     #333b27;
        --zijbalk-accent:   var(--groen-100);
        --rand-sterk:    var(--groen-500);
        --tekst:         #edf2dc;
        --tekst-zacht:   #b4be99;

        --accent:        var(--groen-100);
        --accent-donker: #e3edb4;
        --accent-zacht:  #2b3121;
        --op-accent:     #1f2419;

        --selectie:      var(--groen-700);
        --selectie-rand: #5c6647;
        --op-selectie:   #edf2dc;

        --link:          var(--oranje-500);
        --link-donker:   #f3ac83;

        --waas:          rgb(0 0 0 / 0.6);

        --fout:          #f0a0a0;
        --fout-zacht:    #3a2220;
        --waarschuwing:       var(--oranje-500);
        --waarschuwing-zacht: #33261b;
        --goed:          #a8d98b;
        --goed-zacht:    #1e2c18;
        --focusring:     var(--oranje-500);

        --schaduw-s:     0 1px 2px rgb(0 0 0 / 0.4);
        --schaduw-m:     0 2px 10px rgb(0 0 0 / 0.5);

        /* The other half of the swap described above: after dark the hairline
           separates a panel from the page and the shadow has nothing to do. */
        --paneel-rand:    var(--rand);
        --schaduw-paneel: none;
    }
}