/* ═══════════════════════════════════════════════════════════════════════════
   Jordy Care — the colours, in one place.

   Written 2026-09-29 after a colour audit found the same greys at six slightly
   different values, four meanings of red, and text colours that did not reach
   4.5:1 on the backgrounds they sat on.

   TWO IDENTICAL COPIES, ON PURPOSE. app/ and marketing/ are separate Netlify
   sites, each deployed by dragging its own folder, so neither can read a file
   from the other. app/tokens.css and marketing/tokens.css must stay
   byte-identical: change one, change both in the same commit.

   RULES
     Every page links this before its own <style>, so a page can still override
     a token for itself, and a page that does should say why in a comment.
     Body text is at least 4.5:1 on the surface behind it. Large text, borders,
     focus rings and icons are at least 3:1 (WCAG 2.1 AA, DESIGN.md).
     A colour never carries meaning on its own: red also says "rescue", amber
     also says what could not be read. Roughly one man in twelve cannot tell
     the red from the amber.

   Bumping app/sw.js CACHE_VERSION is required whenever this file changes, or
   returning visitors keep the old copy.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Paper and lines ── */
  --beige:        #f0efe8;   /* the page */
  --card:         #f8f7f0;   /* a raised panel on the page */
  --surface:      #ffffff;   /* a card that should read as white */
  --line:         #e5e4db;   /* ordinary borders and rules */
  --line-strong:  #d6d4c7;   /* input borders, where 3:1 matters */

  /* ── Text ── */
  --ink:          #2a2a1e;   /* body text. 13.4:1 on --beige */
  --ink-soft:     #3d3d2e;   /* secondary text. 9.4:1 on --beige */
  --ink-muted:    #63634f;   /* the quietest text allowed. 5.3:1 on --beige */
  --icon-quiet:   #8a8a78;   /* icons and chevrons ONLY. 3.1:1, never text */

  /* ── Green, the house colour ── */
  --teal-deep:    #2b4d42;   /* headings and primary buttons. 9.9:1 on white */
  --sidebar-bg:   #2f5d50;   /* the left menu */
  --teal-mid:     #3f6b5b;   /* green text on a light ground. 6.1:1 on white */
  --sage:         #7a9e8e;   /* borders, fills and washes. NEVER text */
  --sage-pale:    #deeee8;   /* pale green fill */
  --sage-frost:   #f1f7f4;   /* the palest green wash */

  /* ── The marketing site's accent ── */
  --neon:         #d4f53c;
  --neon-edge:    #a8c62f;

  /* ── Red means one thing: an emergency ── */
  --rescue:       #b42318;   /* the rescue protocol, and nothing else */
  --danger:       #a12020;   /* destructive actions and error text */
  --danger-pale:  #fcebeb;

  /* ── Amber means: this could not be read, or it needs a look ── */
  --amber:        #8a4b0a;
  --amber-pale:   #fdf3dc;

  /* ── Gold, for things waiting on a person ── */
  --gold:         #c9a84c;
  --gold-ink:     #7a5c0e;   /* gold text. 5.9:1 on --gold-pale */
  --gold-pale:    #f5e9c8;
  --gold-line:    #e3cf93;

  /* ── Coach marks ── */
  --coach:        #fff275;

  /* ── The five calendar and record categories ──
     These keys are the values stored in appointments.category, and the
     database derives who may read a row from them. Renaming one here without
     changing the check constraint would break saving. */
  --cat-medical:    #3f6b5b;  --cat-medical-bg: #deeee8;
  --cat-program:    #3a5a80;  --cat-program-bg: #e1e9f3;
  --cat-legal:      #74455f;  --cat-legal-bg:   #f0e2ec;
  --cat-aide:       #8f5424;  --cat-aide-bg:    #f4e4d3;
  --cat-other:      #55554a;  --cat-other-bg:   #ebeae2;

  /* ── Old names, kept working ──
     Every page still uses some of these. They are aliases, not second
     opinions: when a page stops using one, delete it from here too. Do not add
     a new alias; use the token above instead. */
  --cream:        var(--beige);
  --cream-dark:   var(--line);
  --card-bg:      var(--card);
  --white:        var(--surface);
  --teal-soft:    var(--sage);
  --teal-pale:    var(--sage-pale);
  --teal-frost:   var(--sage-frost);
  --sage-dark:    var(--teal-mid);
  --beige-dark:   var(--line);
}

/* ═══════════════════════════════════════════════════════════════════════════
   The hidden attribute has to win.

   The browser's own rule is [hidden] { display: none }, which is weaker than
   ANY class that sets a display. So `.jc-setup-scrim { display: flex }` beat
   `hidden`, and the guided setup card sat on top of the dashboard from the
   moment the page loaded, with an empty frame behind it. Nothing could close
   it, because close() set `hidden` and `hidden` did nothing. Eleven elements
   in dashboard.html alone were in that state on 2026-09-29.

   `hidden` is a promise that an element is not rendered. Nothing should be
   able to override it, so this is one of the few places !important is right.
   An element that needs to be visible should not be carrying `hidden`.
   ═══════════════════════════════════════════════════════════════════════════ */
[hidden] { display: none !important; }