/* Fleet Card System — design tokens.
 *
 * Single source of truth for colour, type, space, shape and motion. Nothing
 * downstream may hard-code a value that exists here.
 *
 * Colour is spent on action and status, never decoration. Every semantic
 * colour is paired in markup with a glyph and a word, so status is never
 * carried by hue alone (WCAG 2.2 §1.4.1).
 */

:root {
  /* ---- brand: petroleum green ---------------------------------------------
   * The base palette, and what the public landing still uses. The three desk
   * portals carry the Business Central teal instead — see the scoped block
   * further down — and since 2026-09-10 so do the POS terminal and the
   * cardholder app, in blocks of their own at the end of this file.
   *
   * That is not a break with the reason this was green. The reason was to
   * match the Redan Coupon & Card Portal so an operator moving between the
   * two products does not relearn what a primary action looks like; that
   * portal is adopting the same teal skin. The public landing keeps this
   * palette: it is what a prospective customer sees first.
   *
   * --brand-600 on white is 5.9:1: AA for body text and AAA for large text,
   * and safe as a button fill with a white label. That is lower than the navy
   * it replaces (8.3:1) — still comfortably passing, but it is the reason
   * `test_styles.py` now measures these ratios instead of trusting a comment.
   */
  --brand-50:  #eff8f2;
  --brand-100: #d8efe0;
  --brand-200: #aedec3;
  --brand-300: #7cc79e;
  --brand-400: #45ab74;
  --brand-500: #1e8b52;
  --brand-600: #157347;
  --brand-700: #0f5c39;
  --brand-800: #0b4a2e;
  --brand-900: #06301e;

  /* The dark command surface — top bar and any full-bleed chrome. Deeper and
   * slightly cooler than brand-900 so white text sits on it comfortably and
   * the accent still reads as an accent against it. */
  --chrome:        #0a3323;
  --chrome-accent: #57d9a3;   /* active markers, legible on the dark surface */
  --chrome-text:   rgba(255, 255, 255, .78);
  --chrome-muted:  rgba(255, 255, 255, .45);
  --chrome-line:   rgba(255, 255, 255, .08);
  --chrome-hover:  rgba(255, 255, 255, .07);
  --chrome-active: rgba(255, 255, 255, .12);

  /* ---- neutrals: a cool ramp, hue 215 across every step ----------------- */
  --n-0:   #ffffff;
  --n-25:  #fbfcfd;
  --n-50:  #f6f8fa;
  --n-100: #eef1f5;
  --n-200: #e2e7ee;
  --n-300: #cdd5e0;
  --n-400: #9aa5b5;
  /* Darker than an even ramp would place it, and deliberately so. This step
     is --text-subtle, which lands on --bg-sunken as often as on white: a
     grouped row, a menu, a disabled field, a card's sunken head. At #6b7788
     it was 4.55:1 on white but 4.01:1 on the sunken ground — the one step
     whose job is to be quiet was the only one under the AA floor, and the
     suite measured the ramp against white alone, so nothing caught it.
     Four points of lightness, same hue and saturation: 4.56:1 sunken,
     5.17:1 white, and the 13.9 / 7.3 / 5.2 hierarchy still reads.
     `test_text_roles_are_readable_on_the_sunken_ground` resolves both ends
     rather than hard-coding the ground, so moving the ramp cannot reopen it. */
  --n-500: #636e7e;
  --n-600: #4d5766;
  --n-700: #39424f;
  --n-800: #262d37;
  --n-900: #161b22;

  /* ---- semantic ---------------------------------------------------------
   * pos/neg are the ledger's credit/debit pair, not merely "success/error".
   */
  --pos-50:  #e8f5ee;
  --pos-200: #bfe0cd;
  --pos-300: #6ee7a8;   /* legible on the dark toast surface */
  --pos-600: #0f7a4d;
  --pos-700: #0b5c3a;

  --neg-50:  #fcecea;
  --neg-200: #f0c6c1;
  --neg-600: #b3241a;
  --neg-700: #8f1d15;

  --warn-50:  #fdf5e3;
  --warn-200: #ecd9a8;
  --warn-600: #9a6500;
  --warn-700: #7a5000;

  /* Info is its own blue, deliberately NOT the brand.
   *
   * It used to alias the brand, which was harmless while the brand was navy.
   * With a green brand it collided head-on with `pos`: a "Credit" terms chip
   * and an "Active" status chip came out the same colour, so a neutral fact
   * about an account read as a good outcome. Green already means credit and
   * approval in this product; the brand cannot also mean "note this".
   */
  --info-50:  #eff4fe;
  --info-200: #c7d7fe;
  --info-600: #1d4ed8;
  --info-700: #1e40af;

  /* ---- financial column group -------------------------------------------
   * A run of money columns is tinted so it reads as one block — the financial
   * position of a row — rather than as several unrelated figures sharing a
   * table. The tint is deliberately weak: it groups, it does not highlight.
   * Anything stronger and every row looks like an exception, which is exactly
   * the signal these screens must keep in reserve for rows that are.
   */
  --fin-bg:       #f3f8f5;
  --fin-bg-hover: #e9f2ec;
  --fin-border:   var(--brand-100);
  --fin-head:     var(--brand-700);

  /* ---- promotion tones ---------------------------------------------------
     The six colours an operator can give a promotion. The desk only needs
     the strong step, for the chip beside the name; the phone apps carry the
     soft ground and the ink that reads on it in their own blocks. */
  --tone-teal:   #008089;
  --tone-amber:  #e8960c;
  --tone-plum:   #a83fa3;
  --tone-indigo: #4c5fd8;
  --tone-lime:   #78a52a;
  --tone-coral:  #e0603a;

  /* ---- surfaces ---------------------------------------------------------- */
  --bg-app:      var(--n-50);
  --bg-surface:  var(--n-0);
  --bg-sunken:   var(--n-100);
  --bg-hover:    var(--n-50);
  --bg-selected: var(--brand-50);

  --border:        var(--n-200);

  /* A QR needs a light quiet zone to scan reliably, in either theme — a dark
     surface behind a dark module pattern is a code readers refuse. So this is
     white on purpose rather than a themed surface, and it is a token so the
     rule against hard-coded colours still holds. `me.css` carries its own
     `--me-qr-ground` for the same reason. */
  --qr-ground:     #ffffff;
  --border-strong: var(--n-300);

  --text:        var(--n-800);
  --text-muted:  var(--n-600);
  --text-subtle: var(--n-500);
  --text-invert: var(--n-0);

  /* ---- type -------------------------------------------------------------
   * 14px base. Headings stay small on purpose: a 40px page title costs a row
   * of data on a screen someone reads for seven hours.
   */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  --fs-11: 0.6875rem;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-22: 1.375rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  /* Reserved for figures that carry a decision — a balance, a KPI, an amount
   * on a receipt. Weight is how this product gets its authority, because
   * size cannot: a 40px page title costs a row of data on a screen somebody
   * reads for seven hours.
   */
  --fw-heavy: 800;

  --lh-tight: 1.25;
  --lh-normal: 1.5;

  /* ---- space: 4px grid --------------------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* ---- shape ------------------------------------------------------------- */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-pill: 999px;

  /* Two shadows only: a hairline at rest, a lift for overlays. */
  --shadow-sm: 0 1px 2px rgba(22, 27, 34, .06);
  --shadow-md: 0 1px 3px rgba(22, 27, 34, .08), 0 4px 12px rgba(22, 27, 34, .06);
  --shadow-lg: 0 8px 28px rgba(22, 27, 34, .16);

  /* ---- layout ------------------------------------------------------------ */
  --rail-w: 240px;
  --rail-w-collapsed: 56px;
  --topbar-h: 52px;

  /* ---- Business Central chrome (desk portals only) ----------------------
   * The application bar and module navigation the backoffice, station and
   * customer portals share with the Fuel Trading System, so an operator
   * moving between the two products does not relearn the frame.
   *
   * The bar is neutral, not branded: it sits above every module, and tinting
   * it green would make the whole product read as one status colour. The cue
   * tiles are where the brand belongs — they are the thing being clicked.
   */
  --appbar-bg:    #22282b;
  --appbar-hover: #323a3e;
  --appbar-text:  #ffffff;
  /* The application bar's own height; the desk block restates it. The
     module bar it once sat over is gone (2026-09-15). */
  --appbar-h:     50px;

  --cue-bg:       var(--brand-600);
  --cue-bg-hover: var(--brand-700);
  --cue-text:     var(--n-0);
  --content-max: 1600px;

  /* ---- motion: functional only ------------------------------------------- */
  --ease: cubic-bezier(.2, 0, .2, 1);
  --dur-fast: 90ms;
  --dur: 150ms;

  /* The brand step that carries *text*. Separate from --brand-600, which is
   * a fill: a fill needs 3:1 against its surround, text needs 4.5:1 against
   * whatever is behind it, and those are not always the same step of a ramp.
   * Grouped table rows and menus sit on --bg-sunken, and links sit in them. */
  --link:       var(--brand-600);
  --link-hover: var(--brand-700);

  --focus-ring: 0 0 0 2px var(--n-0), 0 0 0 4px var(--brand-600);

  --z-rail: 20;
  --z-topbar: 30;
  --z-drawer: 60;
  --z-dialog: 70;
  --z-toast: 80;
}

/* ── The Business Central palette, desk portals only ──────────────────────
 *
 * A Fluent teal ramp anchored on #00b7c3, with the near-black top bar
 * Business Central uses rather than a brand-coloured one. Ported from the
 * Redan Coupon & Card Portal, which is adopting the same skin — the reason
 * this product was petroleum green in the first place was to match that one,
 * so following it here keeps the promise rather than breaking it.
 *
 * Scoped to the three desk portals, exactly as the sibling scopes its own.
 * The POS terminal and the cardholder app carry their own shells and take
 * the same ramp in their own scoped blocks at the end of this file — the
 * operator asked for the two handhelds to match Business Central. The public
 * front door joined the block on 2026-09-19, so a visitor sees the product's
 * own frame before signing in; `:root` keeps the green only as the fallback
 * nothing renders. `business-central.css` is scoped to the desk portals
 * alone; the handheld sheets and the public shell carry the grammar
 * themselves.
 *
 * --brand-700 rather than --brand-600 carries text here. Teal 600 is 4.72:1
 * on white but 4.36:1 on the sunken surface, which is under the 4.5 AA floor
 * — measured, not assumed, and the reason the roles below are reassigned
 * rather than the ramp being darkened away from the sibling's.
 */
:root[data-portal="backoffice"],
:root[data-portal="partner"],
:root[data-portal="station"],
:root[data-portal="customer"],
:root[data-portal="public"] {
  --brand-50:  #e6f6f7;
  --brand-100: #c5ecef;
  --brand-200: #8edce1;
  --brand-300: #54cbd2;
  --brand-400: #00b7c3;
  --brand-500: #009ba6;
  --brand-600: #008089;
  --brand-700: #00666d;
  --brand-800: #005158;
  --brand-900: #003d42;

  /* Teal 600 is 4.72:1 on white but only 4.17:1 on --bg-sunken, which is
   * under the AA floor — and grouped rows are sunken. So text takes 700
   * (5.94:1) while fills keep 600. Measured, not guessed; the ramp itself
   * stays identical to the sibling product's. */
  --link:       var(--brand-700);
  --link-hover: var(--brand-800);

  /* The chrome of the sibling Forecourt product (2026-09-15): a deep teal
     application bar across the top, a pale sidebar with the current
     section tinted and edged, a slim white bar with the trail above the
     page. The sidebar is light because the page is; a dark rail beside a
     white page was the one thing an operator moving between the two
     products had to relearn. */
  --chrome:        #006b76;
  --chrome-accent: #00b7c3;
  --appbar-bg:     #006b76;
  --appbar-hover:  #008089;
  --appbar-h:      50px;
  --topbar-h:      46px;
  --sidebar-bg:          #f8fafb;
  --sidebar-line:        #e1e7ea;
  --sidebar-ink:         #46555f;
  --sidebar-muted:       #6c7b84;
  --sidebar-hover:       #edf3f5;
  --sidebar-active-bg:   #e6f1f3;
  --sidebar-active-ink:  #006c79;
  --sidebar-active-edge: #007d8a;
  --sidebar-block:       #f0f4f5;

  /* The table row under the pointer: a wash of the brand rather than the
     neutral hover, so a row lights in the product's own colour. Borrowed
     from the sibling wet-stock product's tables (2026-09-14), with the
     head band and the hairline between rows. */
  --row-hover:  #f0f7f9;
  --row-rule:   #edf1f3;
  --thead-bg:   #f6f9fa;
  --thead-ink:  #667e8b;
}


/* Density is a user preference; the rail toggle writes this attribute. */
:root[data-density="compact"] {
  --row-py: 7px;
  --table-fs: var(--fs-13);
  --control-h: 28px;
}
:root,
:root[data-density="comfortable"] {
  /* 14px above and below a 21px line is the ~50px row the sibling wet-stock
     product settles on, at body size; compact keeps a scan-height row at
     13px for the operator who works a queue. */
  --row-py: 14px;
  --table-fs: var(--fs-14);
  --control-h: 34px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Honour a forced-colours environment rather than fighting it. */
@media (forced-colors: active) {
  .btn,
  .badge,
  .card {
    border: 1px solid ButtonBorder;
  }
}

/* ═══════════════════════════════════════════════════ the handheld apps

   The POS terminal (`/pos`) and the cardholder app (`/me`) wear the Business
   Central grammar and take its palette: the Fluent teal ramp the desk
   portals carry above, with the near-black bar. Scoped to the two portal
   attributes on purpose: nothing here can reach the desk portals or the
   public landing. `scripts/make_icons.py` reads these blocks, so the
   home-screen icons follow a re-tint.

   `--focus-ring` and `--link` are restated because a custom property resolves
   where it is *defined*: the root ones carry the green even on an element
   where `--brand-600` is teal.

   The cardholder app is also the only handheld with a dark mode: a phone has
   a system setting and a driver checking a balance at night is a real person,
   where an attendant at a pump in daylight is not asking for one. The dark
   ramp lifts the accent to #00B7C3 and darkens the ink on it, the way the
   reference does. */

[data-portal="pos"] {
  --brand-50:  #e6f6f7;
  --brand-100: #c5ecef;
  --brand-200: #8edce1;
  --brand-300: #54cbd2;
  --brand-400: #00b7c3;
  --brand-500: #009ba6;
  --brand-600: #008089;
  --brand-700: #00666d;
  --brand-800: #005158;
  --brand-900: #003d42;

  --link:       var(--brand-700);
  --link-hover: var(--brand-800);

  /* The terminal's bar takes the same deep teal as the desk's application
     bar (2026-09-15), so the one product reads as one product on a desk
     and on a forecourt; the accent on it stays the bright step. */
  --chrome:        #006b76;
  --chrome-text:   rgba(255, 255, 255, .92);
  --chrome-accent: #c5f3f5;
  --chrome-hover:  rgba(255, 255, 255, .1);
  --focus-ring:    0 0 0 2px var(--n-0), 0 0 0 4px var(--brand-600);

  /* The six tones the driver app gives its rows (2026-09-16), so the
     terminal's menu tiles and option rows tell one task from the next at
     arm's length. The terminal is light-only, so one step of each: the soft
     ground and the ink that reads on it (contrast-checked in
     tests/test_handheld_skin.py); the strong step is the root's --tone-*. */
  --tone-teal-soft:   #dff4f5;
  --tone-teal-ink:    #005158;
  --tone-amber-soft:  #fff1d1;
  --tone-amber-ink:   #6b4300;
  --tone-plum-soft:   #f8e6f6;
  --tone-plum-ink:    #6a2468;
  --tone-indigo-soft: #e7ecfc;
  --tone-indigo-ink:  #2c3a8f;
  --tone-lime-soft:   #eaf6d7;
  --tone-lime-ink:    #3a5a10;
  --tone-coral-soft:  #fde8e2;
  --tone-coral-ink:   #8f2f10;

  /* The keypad sheet's measured height, set on the shell by terminal.js
     while the sheet is up; the main column pads by it. */
  --pos-sheet-h: 0px;

  /* The receipt on the roll (2026-09-17): a thermal head prints black on
     white whatever the screen's theme. */
  --paper:     #ffffff;
  --paper-ink: #000000;

  /* The figure read aloud to a customer: two steps past the desk's scale
     (bold pass, 2026-09-16), the larger for a tablet in a cradle. */
  --fs-40: 2.5rem;
  --fs-48: 3rem;
}

/* The driver app defines no `--brand-*` ramp (2026-10-02). It carried the
   Business Central teal until the sage re-tint, and it was already dead
   weight before that: the ramp is read by `terminal.css`, `app.css` and
   `business-central.css`, and this app loads none of them — only this file
   and `me.css`, which reads `--me-*` and nothing else. A test asserted the
   teal here and passed without pinning anything that renders. */
[data-portal="me"] {
  /* The app bar. */
  --me-chrome:       #0b2a1c;
  --me-chrome-ink:   #ffffff;
  --me-chrome-hover: rgba(255, 255, 255, .1);

  /* The forecourt home's sheet (2026-10-06): the chrome green run to the
     edges of the phone, carrying the greeting and the balance. Its second
     ink and its glyph green are light in both themes because the sheet is
     dark in both; the glass is what a pill or a counter cell is cut from,
     the roll the darker lower half of a cell. Both inks are measured on
     `--me-chrome` in test_handheld_skin. */
  --me-sheet-ink-2:  #a9e3c1;
  --me-sheet-accent: #5fc48d;
  --me-sheet-glass:  rgba(255, 255, 255, .1);
  --me-sheet-roll:   rgba(0, 0, 0, .18);

  /* Petroleum green on white (2026-10-05, the evening). The fourth palette:
     Business Central's teal, then sage, then a warm cream and terracotta
     that held it for a few hours. The desk portals still carry the teal and
     are untouched.

     The layout this follows is the one the large fuel-brand apps share — a
     white sheet, pale grey-green ground, a deep green that carries the
     balance and the one filled button. The green is this product's own: the
     root ramp's `--brand-700`, the colour of the favicon, written out as
     literals because this block defines no ramp. Nothing of anybody else's
     identity is taken — no mark, no name, no second brand colour.

     Every pair that puts words on a fill is measured in
     test_handheld_skin (`ME_TEXT_PAIRS`), both themes. White on the fill is
     8.05:1 and on the gradient's far end 5.87:1 — the terracotta's far end
     was 3.12:1 with the balance's second line on it. */
  --me-ground:       #f2f5f3;
  --me-surface:      #ffffff;
  --me-surface-2:    #ecf0ed;
  --me-sunk:         #e6ebe8;
  --me-line:         #e1e6e3;
  --me-line-strong:  #c2cac6;

  --me-ink:          #141a17;
  --me-ink-2:        #45504a;
  /* The quietest text still has to carry body copy: #57625c is 6.35:1 on the
     pane and 5.79:1 on the ground. */
  --me-ink-3:        #57625c;

  --me-accent:       #0f5c39;
  --me-accent-deep:  #0b4a2e;
  /* Where the hero's gradient ends. Its own token since 2026-09-22: `-deep`
     is a text role, and the rewards app's hero needed a fill that is not
     the colour its links are. */
  /* A ground for text like the near end: the wallet's lines sit on all of it. */
  --me-accent-ink:   #ffffff;
  --me-accent-soft:  #e2f1e8;

  /* The tinted header row, and the ink that reads on it. */
  --me-tint:         #e2f1e8;
  --me-tint-ink:     #0b4a2e;

  /* Approval is green because an approved fill is the good outcome. Refusal
     is the one place that needs a different hue, and it is never carried by
     colour alone — every declined row also says the word. */
  --me-ok:           #14663f;
  --me-ok-soft:      #e6f2ec;
  --me-bad:          #a4231c;
  --me-bad-soft:     #fbeceb;
  --me-warn:         #855400;
  --me-warn-soft:    #fdf3e2;

  /* Colour, 2026-09-14. The app was teal and grey; the operator asked for
     it to feel alive. Six tones, each a soft ground, the ink that reads on
     it (every pair is over 6.9:1, measured in test_handheld_skin), and a
     strong step for glyphs and edges that never carries text alone. A
     promotion picks one; the home screen's own rows take one each so a
     glance tells points from coupons from codes. */
  /* Muted toward the warm palette (2026-10-05), and left as they were when
     the ground went white that evening: muted reads as well beside green. The six were saturated —
     a bright teal, a sweet amber, a magenta plum — chosen against a white
     ground and a Business Central teal. On cream beside terracotta they
     read as six stickers on a letterhead, and the teal worst of all,
     because it is the colour this app just left.

     They stay six and they stay apart: the whole point is that a glance
     tells points from coupons from codes before a word is read. What moves
     is saturation, not hue — each one damped toward the earth tones the
     ground belongs to, and every pair still measured here. */
  --me-tone-teal-soft:   #dde8e6;
  --me-tone-teal-ink:    #28504b;
  --me-tone-teal:        #4a7a73;
  --me-tone-amber-soft:  #f1e6d1;
  --me-tone-amber-ink:   #5c4112;
  --me-tone-amber:       #8a6a28;
  --me-tone-plum-soft:   #ebdfe3;
  --me-tone-plum-ink:    #5c3245;
  --me-tone-plum:        #8a5a70;
  --me-tone-indigo-soft: #e1e5ec;
  --me-tone-indigo-ink:  #343f5c;
  --me-tone-indigo:      #5a6889;
  --me-tone-lime-soft:   #e3e9da;
  --me-tone-lime-ink:    #3d5130;
  --me-tone-lime:        #647a53;
  --me-tone-coral-soft:  #f3e1d9;
  --me-tone-coral-ink:   #733420;
  --me-tone-coral:       #a85a3c;

  /* The wallet tiles' own lift and edge (2026-10-07). Not `--me-shadow`:
     that one carries the brand's green glow, and a tile is one of six
     colours, none of them the brand's. */
  --me-tile-lift:    0 1px 2px rgba(20, 26, 23, .05), 0 12px 24px -12px rgba(20, 26, 23, .22);
  --me-tile-edge:    rgba(20, 26, 23, .07);
  /* A wash of the tile's own light, for the pills and the switch button
     that sit on it. Six grounds, so it has to be an alpha and not a
     colour. */
  --me-tile-wash:       rgba(255, 255, 255, .50);
  --me-tile-wash-hover: rgba(255, 255, 255, .72);

  /* ---- the forecourt grades (2026-10-07) ----
     The wallet tiles on the driver's home are not six colours an operator
     picked; they are the pump handles. Green is unleaded, black is diesel,
     red is premium, blue is paraffin, and lubricants are the amber of the
     drum — the code a driver has read at every forecourt they have used,
     before the word beside it.

     Two that are not grades: `money`, which a Value wallet wears because it
     holds currency and not litres, and `fuel`, the generic petroleum tone a
     Volume wallet gets when its product cannot be named. Guessing a grade is
     worse than declining to: the colour is what a driver trusts at a pump.

     Same three steps and the same contract as the promotion tones — `-ink`
     on `-soft` at 4.5:1 for every word, and the strong step for marks only,
     at 3:1. `tests/test_handheld_skin.py` measures all seven in both
     themes. */
  --me-fuel-petrol-soft:    #dde7d7;
  --me-fuel-petrol-ink:     #2c4a26;
  --me-fuel-petrol:         #4c7a3e;
  --me-fuel-diesel-soft:    #dfe2e1;
  --me-fuel-diesel-ink:     #2a3330;
  --me-fuel-diesel:         #505c58;
  --me-fuel-premium-soft:   #f3dedc;
  --me-fuel-premium-ink:    #6d2b26;
  --me-fuel-premium:        #9d453d;
  --me-fuel-paraffin-soft:  #dbe3ed;
  --me-fuel-paraffin-ink:   #26445f;
  --me-fuel-paraffin:       #497092;
  --me-fuel-lubricant-soft: #f1e6d1;
  --me-fuel-lubricant-ink:  #5c4112;
  --me-fuel-lubricant:      #8a6a28;
  --me-fuel-fuel-soft:      #dee6e5;
  --me-fuel-fuel-ink:       #28433f;
  --me-fuel-fuel:           #4a706a;
  --me-fuel-money-soft:     #e2e5ea;
  --me-fuel-money-ink:      #333a4a;
  --me-fuel-money:          #5d6676;

  /* ---- the deep step (2026-10-08) ----
     The balance card is a card: a saturated ground with white on it, not a
     tint with ink. The grade still picks the hue — a diesel wallet is
     graphite and an unleaded one is green, which is the handle either way —
     so what changed is the weight, not the idea. `-deep-ink` is what reads
     on it and `-deep-dim` is the second line, both measured. */
  --me-fuel-petrol-deep:      #1c6138;
  --me-fuel-diesel-deep:      #2c3a36;
  --me-fuel-premium-deep:     #7a2e25;
  --me-fuel-paraffin-deep:    #2a4a63;
  --me-fuel-lubricant-deep:   #6a4d13;
  --me-fuel-fuel-deep:        #1d4f4a;
  --me-fuel-money-deep:       #343c4c;
  --me-fuel-deep-ink:         #ffffff;
  --me-fuel-deep-dim:         #d8e4de;
  --me-fuel-deep-wash:        rgba(255, 255, 255, .13);
  --me-fuel-deep-edge:        rgba(255, 255, 255, .22);

  /* The six tones take the deep step too (2026-10-08), so a hero is the same
     object as the balance card: a saturated ground with white on it. The ink
     and the dim line are the fuel grades' — one pair dresses both families,
     which is the point of there being one `--me-tile-deep`. */
  --me-tone-teal-deep:   #275c55;
  --me-tone-amber-deep:  #5f4714;
  --me-tone-plum-deep:   #5c3245;
  --me-tone-indigo-deep: #343f5c;
  --me-tone-lime-deep:   #3d5130;
  --me-tone-coral-deep:  #6d3620;

  /* ---- glass (2026-10-07) ----
     Frosted where there is genuinely something behind to refract, and
     nowhere else: the chips on a wallet tile sit on the grade's colour, and
     the tab bar has the page scrolling under it. Over the flat ground a
     blur refracts flat ground, which costs a composite and buys a look.

     Two parts, because one of them is what actually reads as glass: the
     wash, and `-edge`, the light caught along the top lip. Every use is
     inside `@supports (backdrop-filter: ...)`, so a phone without it keeps
     the opaque surface rather than a transparent one it cannot blur. */
  --me-glass:        rgba(255, 255, 255, .62);
  --me-glass-edge:   rgba(255, 255, 255, .65);
  --me-glass-blur:   saturate(160%) blur(14px);

  /* ---- the pump display (2026-10-07) ----
     The emblem on the front door: a forecourt pump's own LCD, backlit cyan
     behind a dark bezel. It is a picture of the object the app is about,
     the way the price board and the coupon ticket are inside the app, and
     the one thing the door was missing — its note said as much, that there
     was no photograph of ours to put there. This is not a photograph.

     The ghost is the unlit segments: a full `888.888` sitting behind the
     figure at the contrast of a segment that is off. That one detail is
     what makes a monospace figure read as seven-segment. It is never read,
     so it is the only pair here under 4.5. */
  --me-lcd:          #bfe0dc;
  --me-lcd-ink:      #15312f;
  --me-lcd-ghost:    #a2cbc6;
  --me-lcd-glow:     rgba(255, 255, 255, .55);
  --me-lcd-bezel:    #17231f;
  --me-lcd-bezel-ink: #cfdbd6;

  --me-scrim:        rgba(20, 26, 23, .42);

  /* A phone app's curves (2026-09-12). The reference grammar was tried here
     and read as a desktop product shrunk — square tiles do not look tappable
     without a mouse to hover them. Three radii: controls and small icons,
     panes, and the pill a status keeps.

     Opened up 2026-10-02 with the editorial pass. A pane that holds a whole
     screen's worth of rows wants a softer corner than a 44px control does,
     and the old 20px read as a dialog rather than a sheet. The control radii
     are untouched: a button that rounds as hard as the pane behind it stops
     looking like a separate object. */
  --me-r-sm:         8px;
  --me-r:            12px;
  --me-r-lg:         20px;
  --me-r-xl:         26px;
  --me-r-hero:       28px;
  --me-r-pill:       999px;

  /* The dashboard's type (2026-09-16, docs/DRIVER-DASHBOARD.md): Sora for
     figures and headings, DM Sans for everything read. Both bundled from
     app/static/fonts (OFL, docs/licences/) — never fetched at runtime, so
     the balance renders in its own face on a forecourt with no signal. */
  --me-font-display: "Sora", var(--font-sans);
  --me-font-body:    "DM Sans", "Helvetica Neue", var(--font-sans);

  /* The dashboard's own colours, light: the spec is dark-first and these
     are its equivalents on white — the same roles, the deep teal kept for
     text and fills so every pair stays AA. */
  --me-nav-bg:       #ffffff;
  --me-tab-idle:     #45504a;
  --me-line-dashed:  #c2cac6;
  --me-accent-strong: #0b4a2e;
  --me-accent-link:  #0f5c39;
  --me-accent-tint:  #e2f1e8;
  --me-success:      #14663f;
  --me-success-tint: #e6f2ec;
  --me-pink:         #a83fa3;
  --me-pink-tint:    #f8e6f6;
  --me-amber:        #b86e00;
  --me-amber-tint:   #fff1d1;
  --me-indigo:       #4c5fd8;
  /* A switch's knob is white on either ground; the track carries the state. */
  --me-knob:         #ffffff;
  /* One elevation, for the balance and nothing else: the screen has one
     thing that is the point of it. */
  /* The app bar is the page's own surface, so the phone's status bar and the
     app read as one sheet — the near-black bar was the desk product's. */
  --me-bar:          #ffffff;
  --me-bar-ink:      #141a17;
  --me-bar-hover:    #ecf0ed;
  /* The front door (2026-10-05). The same green as the balance, spelt out as
     its own tokens so the dark theme can answer differently: a hero in the
     dark accent is a full screen of light green at night. */
  --me-door-from:    #157347;
  --me-door-to:      #0f5c39;
  --me-door-ink:     #ffffff;
  --me-door-in:      #ffffff;
  --me-door-in-ink:  #0b4a2e;
  /* Sign up was a darker green than the door itself: its label measured
     10.33:1 and nothing caught that the *button* measured 1.28:1 against
     the ground behind it, so what a driver saw was two words floating on
     green. WCAG asks 3:1 of a control's own boundary, which is the line no
     text-contrast test looks at. Glass instead — a wash of the door's own
     light with a lit edge, which is also what the chips on a wallet tile
     are. The edge is the part that carries the 3:1. */
  --me-door-up:      rgba(255, 255, 255, .14);
  --me-door-up-edge: rgba(255, 255, 255, .55);
  --me-door-up-ink:  #ffffff;
  /* The panel is the only lit thing on the door, so it spills onto it; and
     a second light high and left, because one long green ramp end to end is
     what bands on a cheap OLED phone. */
  --me-door-spill:   rgba(191, 224, 220, .20);
  --me-door-lift:    rgba(255, 255, 255, .07);

  /* Fixed in both themes. A QR is read by a camera expecting dark-on-light,
     so this one surface does not follow the phone into dark mode. */
  --me-qr-ground:    #ffffff;
  --me-qr-ink:       #0b0f0d;

  /* 44px is the floor a thumb needs and the floor WCAG asks for. Named, so
     it cannot be quietly undercut by a component that looks tidier smaller. */
  --me-tap:          44px;
  --me-gutter:       16px;
}

/* The loyalty app (2026-09-18): the driver app's sheet in the warm amber
   of points — the colour its home-screen icon already used — so a member
   can tell the two apart in a phone's recents. Only the accent family
   moves; surfaces, ink and the six tones are shared. Every pair below is
   measured by tests/test_loyalty_ui.py.

   Gold, not brown (2026-09-22). The fill was #8a5200 with white on it:
   safe at 6.4:1 and, on the hero — a large area, where hue is read and text
   is not — unmistakably mud. Points are gold, so the fill is gold and the
   *ink* is the dark one: #f0a91d carries #3a2400 at 7.3:1, better than the
   old pair, and the card finally looks like a reward rather than a tax
   form. Small text on white keeps the deep #6b4300 (8.7:1); a fill can be
   bright where a 14px link cannot. */
[data-portal="me"][data-app="loyalty"] {
  --me-accent:        #f0a91d;
  /* `-deep` carries *text* in this sheet — links, the points figure, a glyph
     on a soft ground — so it stays dark whatever the fill does. (The hero's
     gradient went on 2026-10-07: a hero is a tinted tile now, and this app's
     is amber because its tone is.) */
  --me-accent-deep:   #6b4300;
  --me-accent-ink:    #3a2400;
  --me-accent-soft:   #fff1d1;
  --me-accent-strong: #6b4300;
  --me-accent-link:   #6b4300;
  --me-accent-tint:   #fff1d1;
}

/* ==========================================================================
   Dark mode — the desk portals only
   ==========================================================================
 * Back Office, Station and Customer are read for hours at a desk, which is
 * where a dark theme earns its keep. The POS terminal and the public landing
 * keep their fixed look on purpose: a handheld on a bright forecourt is the
 * one screen where dark actively costs legibility, and the attendant cannot
 * change it mid-shift. `/me` already carries its own.
 *
 * Only the *role* tokens are restated, never the `--n-*` ramp. Inverting the
 * ramp looks tempting and breaks the places that mean "white specifically" —
 * `--text-invert` on a brand fill, the mark in the application bar — which
 * would put dark text on a teal button. Roles are what the components read.
 *
 * Three states, because the viewer has three: an explicit choice stamps
 * data-theme, and the default stamps nothing and follows the device. So the
 * palette is written once and applied twice, and the media query is guarded
 * so an explicit *light* choice beats a dark operating system.
 */

:root[data-portal="partner"][data-theme="dark"],
:root[data-portal="backoffice"][data-theme="dark"],
:root[data-portal="station"][data-theme="dark"],
:root[data-portal="customer"][data-theme="dark"] {
  /* Surfaces. Not neutral grey — a slight teal bias, so the ground belongs to
     the same family as the brand rather than sitting under it. */
  --bg-app:      #0e1417;
  --bg-surface:  #151d21;
  --bg-sunken:   #10171a;
  --bg-hover:    #1c262b;
  --bg-selected: #0c2b2f;
  --row-hover:   #1c262b;
  --row-rule:    #202c32;
  --thead-bg:    #1b252a;
  --thead-ink:   #8b9aa4;

  --border:        #26333a;
  --border-strong: #38484f;

  /* The brand's tint end. These three are only ever backgrounds and
     borders — the desk skin paints every table header `--brand-50` with
     `--brand-800` ink — so on a dark page they have to become deep rather
     than pale, or the header band stays white on a black table.
  
     --brand-600 and --brand-700 are NOT restated: a filled brand button is
     teal in both themes. Nor is --brand-800, which is the pressed state of
     that button as well as header ink — flipping it would fix the ink and
     turn the pressed button pale. The header's colour is overridden where
     it is set instead, in business-central.css. */
  --brand-50:  #0d2327;
  --brand-100: #123239;
  --brand-200: #17434c;

  /* The ramp's middle, restated. Fifty-five rules across the stylesheets
     read `--n-*` directly rather than through a role — `thead th` takes
     `--n-50` for its band, `.badge-neutral` takes `--n-100` and `--n-600`
     — so leaving the ramp light leaves those components light on a dark
     page. Converting all fifty-five to roles would be tidier and would
     also shift the light theme, which a theme switch is not allowed to do.
  
     Four steps are deliberately NOT restated. --n-0 means white
     *specifically* — the ink on a filled brand button and the mark on the
     application bar — and --n-700/800/900 stay dark because the toast is a
     dark surface with white text in both themes. */
  --n-25:  #131b1f;
  --n-50:  #1b252a;
  --n-100: #1f2b31;
  --n-400: #8b9aa4;
  --n-500: #a3b2bc;
  --n-600: #bccad3;

  --text:        #e7eef2;
  --text-muted:  #a8b6bf;
  --text-subtle: #7e8d97;
  /* Still white: this is the ink on a filled brand button, which stays teal
     in either theme. */
  --text-invert: #ffffff;

  /* Brand 600 is 4.72:1 on white and barely 2:1 on a dark surface — a link
     that is technically the brand colour and practically invisible. Link text
     climbs the ramp instead. */
  --link:       var(--brand-300);
  --link-hover: var(--brand-200);

  /* Semantic hues invert the same way: the 600 steps are chosen against
     white, so on a dark ground the *soft* tints become deep and the ink
     becomes light. */
  --pos-50:  #10291d;
  --pos-200: #1d4433;
  --pos-600: #5cd39a;
  --pos-700: #8ae3ba;
  --neg-50:  #2b1517;
  --neg-200: #4a2226;
  --neg-600: #f2938c;
  --neg-700: #f7b3ae;
  --warn-50:  #2a2011;
  --warn-200: #45351a;
  --warn-600: #e2b269;
  --warn-700: #eec894;
  --info-50:  #12203a;
  --info-200: #1d3054;
  --info-600: #8fb2f5;
  --info-700: #b3caf9;

  /* The money block. A tint that reads as a group on a dark ground without
     glowing — the figures on it still have to clear 4.5:1. */
  --fin-bg:       #14211d;
  --fin-bg-hover: #1a2a25;

  /* The application bar sits a shade *above* the page rather than below it.
     Going darker was the first instinct and does not work: near-black has no
     room left, and #0a1013 against a #0e1417 page measured 1.03:1 — chrome
     and content merged into one field. Lighter separates (1.28:1) and reads
     as elevation, which is what the bar is. */
  --chrome:       #0f2d30;
  --appbar-bg:    #0f2d30;
  --appbar-hover: #17434c;
  --sidebar-bg:          #121a1e;
  --sidebar-line:        #26333a;
  --sidebar-ink:         #c9d3d8;
  --sidebar-muted:       #8b9aa4;
  --sidebar-hover:       #1c262b;
  --sidebar-active-bg:   #0c2b2f;
  --sidebar-active-ink:  #80dce2;
  --sidebar-active-edge: #00b7c3;
  --sidebar-block:       #172126;
}

/* The same palette when the device asks for it and nobody has chosen
   otherwise. Guarded so an explicit light choice wins over a dark OS. */
@media (prefers-color-scheme: dark) {
  :root[data-portal="partner"]:not([data-theme="light"]),
  :root[data-portal="backoffice"]:not([data-theme="light"]),
  :root[data-portal="station"]:not([data-theme="light"]),
  :root[data-portal="customer"]:not([data-theme="light"]) {
    --bg-app:      #0e1417;
    --bg-surface:  #151d21;
    --bg-sunken:   #10171a;
    --bg-hover:    #1c262b;
    --bg-selected: #0c2b2f;
    --row-hover:   #1c262b;
    --row-rule:    #202c32;
    --thead-bg:    #1b252a;
    --thead-ink:   #8b9aa4;

    --border:        #26333a;
    --border-strong: #38484f;

    /* The brand's tint end. These three are only ever backgrounds and
       borders — the desk skin paints every table header `--brand-50` with
       `--brand-800` ink — so on a dark page they have to become deep rather
       than pale, or the header band stays white on a black table.
    
       --brand-600 and --brand-700 are NOT restated: a filled brand button is
       teal in both themes. Nor is --brand-800, which is the pressed state of
       that button as well as header ink — flipping it would fix the ink and
       turn the pressed button pale. The header's colour is overridden where
       it is set instead, in business-central.css. */
    --brand-50:  #0d2327;
    --brand-100: #123239;
    --brand-200: #17434c;

    /* The ramp's middle, restated. Fifty-five rules across the stylesheets
       read `--n-*` directly rather than through a role — `thead th` takes
       `--n-50` for its band, `.badge-neutral` takes `--n-100` and `--n-600`
       — so leaving the ramp light leaves those components light on a dark
       page. Converting all fifty-five to roles would be tidier and would
       also shift the light theme, which a theme switch is not allowed to do.
    
       Four steps are deliberately NOT restated. --n-0 means white
       *specifically* — the ink on a filled brand button and the mark on the
       application bar — and --n-700/800/900 stay dark because the toast is a
       dark surface with white text in both themes. */
    --n-25:  #131b1f;
    --n-50:  #1b252a;
    --n-100: #1f2b31;
    --n-400: #8b9aa4;
    --n-500: #a3b2bc;
    --n-600: #bccad3;

    --text:        #e7eef2;
    --text-muted:  #a8b6bf;
    --text-subtle: #7e8d97;
    --text-invert: #ffffff;

    --link:       var(--brand-300);
    --link-hover: var(--brand-200);

    --pos-50:  #10291d;
    --pos-200: #1d4433;
    --pos-600: #5cd39a;
    --pos-700: #8ae3ba;
    --neg-50:  #2b1517;
    --neg-200: #4a2226;
    --neg-600: #f2938c;
    --neg-700: #f7b3ae;
    --warn-50:  #2a2011;
    --warn-200: #45351a;
    --warn-600: #e2b269;
    --warn-700: #eec894;
    --info-50:  #12203a;
    --info-200: #1d3054;
    --info-600: #8fb2f5;
    --info-700: #b3caf9;

    --fin-bg:       #14211d;
    --fin-bg-hover: #1a2a25;

    --chrome:       #0f2d30;
    --appbar-bg:    #0f2d30;
    --appbar-hover: #17434c;
    --sidebar-bg:          #121a1e;
    --sidebar-line:        #26333a;
    --sidebar-ink:         #c9d3d8;
    --sidebar-muted:       #8b9aa4;
    --sidebar-hover:       #1c262b;
    --sidebar-active-bg:   #0c2b2f;
    --sidebar-active-ink:  #80dce2;
    --sidebar-active-edge: #00b7c3;
    --sidebar-block:       #172126;
  }
}

@media (prefers-color-scheme: dark) {
  [data-portal="me"] {
    --me-chrome:       #070b09;
    --me-chrome-ink:   #eef3f0;
    --me-chrome-hover: rgba(255, 255, 255, .08);
    /* The sheet is dark in both themes, so its inks do not change. */
    --me-sheet-ink-2:  #a9e3c1;
    --me-sheet-accent: #5fc48d;

    /* The dashboard palette (2026-09-16, docs/DRIVER-DASHBOARD.md, "Design
       tokens"), re-tinted to petroleum green 2026-10-05: the design is
       dark-first and these are its values, with the neutrals leaning green
       so the two themes read as one product. */
    --me-ground:       #0d1210;
    --me-surface:      #151b18;
    --me-surface-2:    #1e2622;
    --me-sunk:         #0a0e0c;
    --me-line:         #242d28;
    --me-line-strong:  #3b4741;

    --me-ink:          #eef3f0;
    --me-ink-2:        #c3cdc7;
    --me-ink-3:        #9aa59f;

    /* The accent brightens on a dark ground, so the ink on it darkens: white
       on #5fc48d would fail where #06301e passes at 6.74:1. */
    --me-accent:       #5fc48d;
    --me-accent-deep:  #8fdab0;
    --me-accent-ink:   #06301e;
    /* Dark ink sits on this at 4.87:1, and the light theme's value is a
       ground for white. */
    --me-accent-soft:  #12281c;

    --me-tint:         #12281c;
    --me-tint-ink:     #a9e3c1;

    --me-ok:           #5be3a0;
    --me-ok-soft:      #143324;
    --me-bad:          #ef9b95;
    --me-bad-soft:     #2c1614;
    --me-warn:         #f2b544;
    --me-warn-soft:    #2a2415;

    --me-nav-bg:       #151b18;
    --me-tab-idle:     #c3cdc7;
    --me-line-dashed:  #3b4741;
    --me-accent-strong: #45ab74;
    --me-accent-link:  #8fdab0;
    --me-accent-tint:  #12281c;
    --me-success:      #5be3a0;
    --me-success-tint: #143324;
    --me-pink:         #e68ad8;
    --me-pink-tint:    #2a1a2a;
    --me-amber:        #f2b544;
    --me-amber-tint:   #2a2415;
    --me-indigo:       #9ea8ff;
    --me-knob:         #ffffff;
    /* The same six, damped the same way on a dark ground. */
    --me-tone-teal-soft:   #15302d;
    --me-tone-teal-ink:    #9ccdc6;
    --me-tone-teal:        #6fa39b;
    --me-tone-amber-soft:  #2e2616;
    --me-tone-amber-ink:   #dec28a;
    --me-tone-amber:       #c0a06a;
    --me-tone-plum-soft:   #2c1f26;
    --me-tone-plum-ink:    #d9adbd;
    --me-tone-plum:        #b88aa0;
    --me-tone-indigo-soft: #1d2231;
    --me-tone-indigo-ink:  #b3bdd6;
    --me-tone-indigo:      #8f9bb8;
    --me-tone-lime-soft:   #1e2718;
    --me-tone-lime-ink:    #b6c9a4;
    --me-tone-lime:        #90a880;
    --me-tone-coral-soft:  #331c12;
    --me-tone-coral-ink:   #e3a98f;
    --me-tone-coral:       #c0826a;

    --me-tile-lift:    0 1px 2px rgba(0, 0, 0, .4), 0 12px 24px -12px rgba(0, 0, 0, .7);
    --me-tile-edge:    rgba(255, 255, 255, .07);
    --me-tile-wash:       rgba(255, 255, 255, .07);
    --me-tile-wash-hover: rgba(255, 255, 255, .13);

    /* The same seven handles at night: the hue each grade is known by, on a
       dark ground. Same contract, measured the same way. */
    --me-fuel-petrol-soft:    #1b2b17;
    --me-fuel-petrol-ink:     #a8c99c;
    --me-fuel-petrol:         #7ea172;
    --me-fuel-diesel-soft:    #222826;
    --me-fuel-diesel-ink:     #bcc6c2;
    --me-fuel-diesel:         #8d9a95;
    --me-fuel-premium-soft:   #331916;
    --me-fuel-premium-ink:    #e0a49d;
    --me-fuel-premium:        #c0776e;
    --me-fuel-paraffin-soft:  #172633;
    --me-fuel-paraffin-ink:   #a3c0da;
    --me-fuel-paraffin:       #7496b3;
    --me-fuel-lubricant-soft: #2e2616;
    --me-fuel-lubricant-ink:  #dec28a;
    --me-fuel-lubricant:      #c0a06a;
    --me-fuel-fuel-soft:      #172725;
    --me-fuel-fuel-ink:       #9bc3bd;
    --me-fuel-fuel:           #6f9b95;
    --me-fuel-money-soft:     #1f232b;
    --me-fuel-money-ink:      #b6bdcb;
    --me-fuel-money:          #868ea0;

    --me-fuel-petrol-deep:      #15301d;
    --me-fuel-diesel-deep:      #1b2320;
    --me-fuel-premium-deep:     #3a1a14;
    --me-fuel-paraffin-deep:    #16293a;
    --me-fuel-lubricant-deep:   #33270c;
    --me-fuel-fuel-deep:        #132c29;
    --me-fuel-money-deep:       #1c212b;
    --me-fuel-deep-ink:         #eef3f0;
    --me-fuel-deep-dim:         #aebbb6;
    --me-fuel-deep-wash:        rgba(255, 255, 255, .09);
    --me-fuel-deep-edge:        rgba(255, 255, 255, .14);

    --me-tone-teal-deep:   #132825;
    --me-tone-amber-deep:  #2b2210;
    --me-tone-plum-deep:   #271922;
    --me-tone-indigo-deep: #1a1f2d;
    --me-tone-lime-deep:   #1b2416;
    --me-tone-coral-deep:  #2e180f;

    /* At night the wash is the ground's own darkness, not white — a white
       film over a dark tile is fog, not glass — and the lip catches much
       less light. */
    --me-glass:        rgba(30, 38, 34, .55);
    --me-glass-edge:   rgba(255, 255, 255, .10);
    --me-glass-blur:   saturate(140%) blur(14px);

    /* At night the backlight is the only thing lit on the door, so it stays
       close to the daytime panel and the bezel goes darker around it. */
    --me-lcd:          #9ec6c1;
    --me-lcd-ink:      #15312f;
    --me-lcd-ghost:    #86afaa;
    --me-lcd-glow:     rgba(255, 255, 255, .34);
    --me-lcd-bezel:    #0e1714;
    --me-lcd-bezel-ink: #aebbb6;

    --me-scrim:        rgba(0, 0, 0, .6);
    --me-bar:          #151b18;
    --me-bar-ink:      #eef3f0;
    --me-bar-hover:    #1e2622;
    /* The door at night: a deep green falling to the page's own ground, the
       one filled button in the accent and the other a step off the ground. */
    --me-door-from:    #163524;
    --me-door-to:      #0d1210;
    --me-door-ink:     #eef3f0;
    --me-door-in:      #5fc48d;
    --me-door-in-ink:  #06301e;
    --me-door-up:      rgba(255, 255, 255, .10);
    --me-door-up-edge: rgba(255, 255, 255, .45);
    --me-door-up-ink:  #eef3f0;
    --me-door-spill:   rgba(159, 198, 193, .13);
    --me-door-lift:    rgba(255, 255, 255, .05);
    /* --me-qr-ground and --me-qr-ink deliberately do not change. */
  }
}

/* The loyalty app in the dark: the amber brightens and the ink on it
   darkens, as the driver app's teal does. */
@media (prefers-color-scheme: dark) {
  [data-portal="me"][data-app="loyalty"] {
    --me-accent:        #e8960c;
    --me-accent-deep:   #b86e00;
    --me-accent-ink:    #1c1300;
    --me-accent-soft:   #2a2415;
    --me-accent-strong: #f2b544;
    --me-accent-link:   #f6b84a;
    --me-accent-tint:   #2a2415;
  }
}