/* public/styles/card-dark.css — the /card dark palette.
   ═══════════════════════════════════════════════════════════════════
   QUEUE ITEM IE. Loaded by card.html ONLY, after
   public/styles/design-tokens.css and public/styles/components.css. It is
   card-scoped on purpose, the same way public/styles/admin-dark.css is
   admin-scoped and /app's dark palette is inline: the three must not stack.

   WHY /card NEEDS ONE AT ALL. design-tokens.css carries the SEMANTIC families'
   dark values (info, warning, success, pending, pattern-alert) but not the
   NEUTRALS — `--paper`, `--ink`, `--muted`, `--line` have one value there, and
   each surface flips them itself. /card draws its list and its primary button
   out of the shared component layer (`.kaf-group`, `.kaf-row-card`,
   `.kaf-card-*`, `.btn-primary`, `.kaf-avatar`), so without this file those
   components paint a white card on a near-black page.

   WHY A FILE RATHER THAN A BLOCK IN card.html: the reason admin-dark.css gives,
   and it applies at any size. A palette is ONE place, and colour declarations
   inside an ENTRY POINT read to META-29 as new off-token literals — when they
   are the exact opposite, the place the tokens are defined. Same exclusion
   design-tokens.css and admin-dark.css hold, and for the same reason; the gates
   that need to read a palette name it themselves (META-43 reads this file).

   THE VALUES ARE NOT NEW. Every one is copied from admin-dark.css, so "dark"
   means one thing across the product rather than a third opinion of it — and
   that is also why the de-tinting queue item FD did to the neutrals is already
   in them. Measured, on this page's own pairings:

     --ink   #fafafa on --paper #1a1a1a ......... 16.7:1
     --muted #9a9a9a on --paper #1a1a1a .......... 6.1:1
     --on-accent #1a1a1a on --gold #6bb6d4 ....... 7.7:1
     --line-strong #737373 on --paper ............ 3.7:1   (WCAG 1.4.11's
                                                            non-text floor, and
                                                            this page's row
                                                            separator IS
                                                            structure)

   Not asserted here, MEASURED: tests/flows/ie-card.spec.js walks every text
   node on the page in both schemes and checks it against WCAG 1.4.3.

   `prefers-color-scheme` ALONE — there is no `[data-theme]` trigger, because
   /card has no theme switch. A contact card is read once for thirty seconds,
   and a preference it cannot remember for you is a control that does nothing
   (R6). The page follows the phone, full stop.
   ═══════════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
  :root {
    /* ── Neutrals: the light palette, inverted. Mirrors admin-dark.css so a
          component defined once paints the same wherever it is drawn. */
    --paper:        #1a1a1a;
    --paper-2:      #232323;
    --paper-3:      #2c2c2c;
    --app-canvas:   #131313;
    --surface:      var(--paper);
    --surface-alt:  var(--paper-2);
    --white:        var(--paper);
    --ink:          #fafafa;
    --ink-soft:     var(--ink);
    --muted:        #9a9a9a;
    --ink-faint:    var(--muted);
    --line:         #2e2e2e;
    --line-strong:  #737373;
    --frost:        var(--paper-3);

    /* ── Accent. A mid-tone accent on a dark page cannot be fixed by choosing
          a text colour — 4.6:1 with white, 3.8:1 with ink — so the accent
          itself moves and text on it goes dark. */
    --primary:        #6bb6d4;
    --primary-strong: #95cfe3;
    --on-accent:      var(--paper);

    /* ── THE ALIASES, AND THIS IS THE HALF THAT IS EASY TO MISS.
          A custom property resolves in the scope it is DECLARED in. `--gold`
          is declared on design-tokens.css's `:root` in terms of `--primary`,
          so it captured the LIGHT value there and no override of `--primary`
          down here reaches it. That is META-43's whole subject, and the reason
          this file is in its scope list: without these three lines
          `.btn-primary` would paint the light accent on a dark page. (The
          focus colour is `--focus`, re-declared by design-tokens.css's own
          dark mirror since KE.) */
    --gold:        var(--primary);
    --gold-deep:   var(--primary-strong);
    --gold2:       var(--primary-strong);
  }
}