/* =============================================================================
   PALETTE — MINT NAV, LIGHT EVERYTHING ELSE.
   Trial, from Figma section 57:5499 "palette 3".

       @import url("palette-mint.css");

   🚨 THIS ONE WAS NOT A PALETTE SWAP, and it is the reason the token set grew.
   The first three palettes only changed VALUES. This one changes what the
   surfaces ARE:

     * the nav is a GRADIENT with a 1px border, not a flat fill;
     * the floating filter bar DECOUPLES from the nav — it was always the same
       colour; here it is ground-coloured with a card-like border and black chips;
     * the footer goes LIGHT — no fill at all, rows outlined instead of filled,
       and its text is INK rather than white.

   So `.header-inner`, `.filter-bar`, `.filter-container > a`, `.link-list a` and
   the footer's text colour all had to start reading tokens they previously
   hardcoded, and seven tokens plus `--ring` were added. Every other palette
   defines them inertly — fills equal to what they already used, borders
   transparent, `--ring: 0` — so the three approved palettes are unchanged and
   the geometry of every approved page is untouched.

   ⭐ WORTH THE TROUBLE: the next iteration is a file again, not a refactor. That
   is the whole point of having done it.

   Sampled, every value read off a node:
     #f2f1ee  57:5500 desktop frame fill = the page ground; ALSO the filter bar
              (57:5810) and, by having no fill at all, the footer (57:5831)
     #f5f5f5  57:5521 the card — unchanged from olive and charcoal
     gradient 57:5502 backgroundImage, verbatim from Figma:
              linear-gradient(95.5134deg, rgb(48,184,173) 30.649%,
                                          rgb(42,158,149) 77.398%)
     #54c2b9  57:5502 the nav's 1px border
     #050505  57:5505 the nav chips — near-black, not pure
     #000000  57:5812 the filter chips — pure black, unlike the nav's #050505.
              Kept distinct rather than unified: it is what the drawing says.
     #dbd8d8  57:5810 the filter bar's border — the card border's value
     #c7c5c4  57:5835 the footer rows' border
     black    57:5836 the footer's text

   ⚠️ THE 2px THAT CONFIRMS THE BORDERS. The nav measures 66 here against 64 in
   every other palette, the footer rows 50 against 48, the filter bar 58 against
   56. That is the 1px border on each, top and bottom — which is why `--ring` is
   a WIDTH token and not just a colour. At `--ring: 0` the other palettes keep
   their exact geometry.

   ⚠️ --c-chrome IS STILL A FLAT COLOUR even though the nav is a gradient. Four
   other things read it — the focus rings, the "Näytä lisää" button, and the
   mobile full-screen nav surface — and a gradient is wrong for all of them. It
   holds the gradient's START colour, which is the one those elements should
   match. --c-chrome-fill is what the nav itself paints with.

   ⭐ --c-chrome-rule IS NOW SAMPLED, unlike in the other two trials. It was
   derived here too — white at ~13% over the chip, giving #262626 — until the
   dropdown artboard 59:6757 turned up drawing the divider explicitly as
   #353535 on 59:6764. The drawn value wins; the derivation was a stand-in for a
   node that did not exist yet, and it was one step too dark.

   🚨 CONTRAST — run `python3 check-contrast.py` for the full table, but the two
   that matter here: white on the nav's #30b8ad is 2.45:1, the same problem the
   teal palette had, because the nav is the same green. And "Näytä lisää" shares
   it. The footer, by going light, is FIXED — black on #f2f1ee is 18.6:1 where
   white on the old navy was 14.9:1, so it gains.
   ========================================================================== */

:root {
  /* grounds */
  --c-ground:            #f2f1ee;  /* page background               57:5500 */
  --c-surface:           #f5f5f5;  /* restaurant card               57:5521 */
  --c-surface-raised:    #ffffff;  /* diet chip on card                     */
  --c-surface-border:    #dbd8d8;  /* 1px card border               57:5521 */
  --c-rule:              #d2d2d2;  /* dashed dish divider                   */

  /* ink */
  --c-ink:               #000000;
  --c-ink-muted:         #646464;
  --c-on-dark:           #ffffff;
  --c-ink-placeholder:   #b4b0b0;

  /* the nav — a gradient with a border */
  --c-chrome:            #30b8ad;  /* the gradient's START, for everything
                                      that is not the bar itself     57:5502 */
  --c-chrome-fill:       linear-gradient(95.5134deg,
                           rgb(48, 184, 173) 30.649%,
                           rgb(42, 158, 149) 77.398%);        /*     57:5502 */
  --c-chrome-border:     #54c2b9;  /*                               57:5502 */
  --c-chrome-raised:     #050505;  /* nav chips, near-black         57:5505 */
  --c-chrome-rule:       #353535;  /* dropdown divider              59:6764 */

  /* the floating filter bar — light here, and its own thing for the first time */
  --c-filter:            #f2f1ee;  /*                               57:5810 */
  --c-filter-raised:     #000000;  /* filter chips, PURE black      57:5812 */
  --c-filter-border:     #dbd8d8;  /*                               57:5810 */

  /* the footer — light: no fill, outlined rows, ink text */
  --c-footer:            #f2f1ee;  /* no fill in the drawing, so the ground  */
  --c-footer-row:        transparent;                          /*    57:5835 */
  --c-footer-row-border: #c7c5c4;  /*                               57:5835 */
  --c-on-footer:         #000000;  /* ink, not white                57:5836 */

  /* the 1px outline this palette puts on the nav, filter bar and footer rows */
  --ring: 1px;
}