/* MJM|DA Tools — design tokens.

   Colours taken from mjmda.eu itself — its stylesheet
   (wp-content/themes/mjmda/dist/styles/main.css) and its logo
   (dist/images/logo-white.svg), so the tools sit beside the practice's own site
   without a visible shift.

   Note on provenance, updated 2026-08-25: every colour here still comes from
   the live site. The supplied MJMDA_LOGO_REFRESH_2026 lockup is now used for
   the logo itself, but its printed ground (#5E5B56) is NOT the practice's grey
   and must not leak into these tokens — Jan confirmed the standard grey is the
   charcoal #464743. The lockup is keyed to transparency so it carries no
   background of its own into the page.

   For anyone who does sample those files: they are four-component Adobe CMYK
   carrying a ~500 KB ICC profile. PowerShell's System.Drawing ignores the
   profile and reports #574F45/#D36D2E plus a graduated border the file does not
   have; a colour-managed browser reads #5E5B56/#D9712A. Use a colour-managed
   reader, or the numbers will look plausible and be wrong.

   Note on the orange: #D67437 is the identity colour and carries the logo bar,
   rules and marks. It only reaches 3.00:1 on the page ground, so it fails WCAG
   AA wherever it carries actual words. Darkened variants below are used for
   text and button faces; the eye still reads them as the brand orange, and they
   clear AA. Do not collapse them back into one value.

   Type: the live site pairs Roboto Condensed with Calibri. Calibri is a
   Microsoft font with no web-embedding licence, so Carlito — metrically
   identical, open licence — stands in, which is why the two render at matching
   sizes. Both families are served from this origin, not from Google; the faces
   and the reasoning are in css/fonts.css. */

:root {
  /* Brand, straight from mjmda.eu */
  --orange:        #D67437;  /* identity — the logo bar, rules, non-text accents */
  --orange-text:   #A95C2B;  /* 4.53:1 on the page ground — links, eyebrows */
  --orange-fill:   #B2602E;  /* 4.56:1 behind white — button faces, focus ring */
  --orange-fill-h: #995328;  /* 5.80:1 — hover */
  /* THE DARK SURFACE AND THE DARK INK ARE TWO DIFFERENT TOKENS. They used to be
     one (--brand-dark did both jobs), which meant the grey behind the topbar
     could not move without also repainting every heading on the site.

     --surface-dark is MJM|DA's charcoal, the practice's standard grey and the
     second most used colour in their own stylesheet (64 uses). Jan confirmed it
     on 2026-08-25 against the lighter #5E5B56 the supplied 2026 logo artwork is
     printed on: the artwork's ground is NOT the brand grey, and the tools must
     not drift towards it. The lockup is keyed to real transparency precisely so
     it can sit on this colour instead of dragging its own in. */
  --surface-dark:    #464743;  /* topbar, dark panels, the banner */
  --brand-dark:      #1A1A18;  /* their near-black. INK ONLY — headings, strong
                                  body text. Never a background. */
  /* Deliberately the same value as --surface-dark: one brand colour doing two
     jobs, body ink on the pale ground and the ground itself on dark. Two names
     because the roles move independently — do not collapse them. */
  --dark-grey:     #464743;  /* 8.59:1 on the page ground — body text */
  /* Muted body text. Was #707070, which measured 4.54:1 on the page ground —
     AA, but with four hundredths to spare, so ANY tint over that ground pushed
     it under. It did: a selected choice card wears --select-tint, and its own
     description text measured 4.32:1. Darkened until it clears on the tinted
     ground too. Theirs is #999 (2.61:1). */
  --mid-grey:      #6B6B6B;  /* 4.89:1 on the ground · 5.33 on white · 4.66 tinted */
  --light-grey:    #D5D5D5;  /* decorative rules only — not a control boundary */
  --off-white:     #F5F5F5;  /* their page ground */
  --white:         #FFFFFF;

  /* Text on --surface-dark. Solid, not rgba(255,255,255,a) — alphas are easy to
     set without checking, and the ones this file used to carry failed AA.
     Ratios below are against --surface-dark #464743, and ONLY against it.

     ALL THREE WERE RE-DERIVED when the surface moved off the near-black, and
     the charcoal is unforgiving: MJM|DA's own mid grey #999999 manages 3.29:1
     here and fails body text outright, which is why none of these is one of
     their greys. Neutral rather than warm on purpose — the charcoal is very
     slightly green, and a warm grey reads pink against it.

     RE-DERIVED AGAIN when the glow arrived, because the glow moved the ground.
     Both ratios are quoted above: "flat" is bare #464743, "glowed" is the
     surface at the wash's brightest point, #5A4D41 (the charcoal blended 14%
     towards the orange). The glowed figure is the one that has to pass, and
     the previous #B7B7B6 did not — it fell to 4.07:1, under the 4.5:1 body
     text needs. A decorative wash is not allowed to cost legibility, so the
     ink moved instead of the wash. */
  --on-dark-strong: #FFFFFF;  /* 9.36:1 flat · 8.16:1 glowed */
  --on-dark-muted:  #C4C4C3;  /* 5.36:1 flat · 4.68:1 glowed — body copy,
                                  links, quiet buttons */
  --on-dark-faint:  #9E9E9C;  /* 3.49:1 flat · 3.04:1 glowed — NON-TEXT only:
                                  rules, pill borders, and disabled items,
                                  which WCAG 1.4.3 exempts anyway */

  /* Semantic state — deliberately separate from the brand accent.
     Each has three parts, because a state message is a tinted block: the line
     colour, the ground behind it, and the ink on that ground. Only --error-bg
     used to be a token; the other five pairs were written out as literals in
     base.css AND again in components.css, so the same six values existed in
     four places and the styleguide could not show them. Ratios are ink on its
     own tint. */
  --ok:            #3F7A50;
  --ok-bg:         #EDF5EF;
  --ok-ink:        #2F6440;   /* 6.27:1 on --ok-bg */
  --info:          #35708C;
  --info-bg:       #ECF2F6;
  --info-ink:      #2A5C74;   /* 6.45:1 on --info-bg */
  --warn:          #896C14;
  --warn-bg:       #FAF4E3;
  --warn-ink:      #6B540F;   /* 6.59:1 on --warn-bg */
  --error:         #A33B26;
  --error-h:       #8C3220;   /* the destructive button on hover, the same
                                 relationship --orange-fill-h has to --orange-fill */
  --error-bg:      #FBEFEC;
  --error-ink:     var(--error);  /* 5.81:1 on --error-bg */

  /* A search term marked inside a result. A tint of the identity orange rather
     than the browser's yellow; the ink on it is set explicitly, because a
     match can land in --mid-grey text, which measures only 3.84:1 here. */
  --mark-bg:       #F6DFC7;   /* --brand-dark on it is 13.53:1 */

  /* The failure state on a dark surface. --error itself is 1.43:1 on the
     charcoal and cannot be seen at all; this is large-text only at 4.00:1.
     It lives here rather than in the styleguide's own CSS because it silently
     fell from 7.45:1 when the dark surface moved, and a literal cannot be
     caught by the contrast matrix. */
  --error-on-dark: #F0907B;

  /* ── direction ──────────────────────────────────────────────────────────
     Pathfinder's result reads on a stay ←→ leave axis, and that axis needs its
     own three colours because it is NOT a state ramp: leaving is not an error
     and staying is not a success. So the far end is BLUE, never red — the
     original made that call and it is the right one. Green and amber are the
     existing --ok and --warn, aliased rather than duplicated so the two cannot
     drift apart; only the blue is new.

     The plain trio is ink and bar fill on the pale grounds. The -on-dark trio
     is for the result hero, where the arc and the confidence dot are non-text
     and need 3:1 — these clear 4.2:1 even at the glow's brightest point. */
  --dir-stay:    var(--ok);              /* 4.69:1 on the ground */
  --dir-neutral: var(--warn);            /* 4.57:1 */
  --dir-leave:   #356E88;                /* 5.15:1. Theirs was #3A7A9A (4.35:1) */
  --dir-stay-on-dark:    #8CC79B;        /* 4.80:1 flat · 4.18:1 glowed */
  --dir-neutral-on-dark: #D9BE6A;        /* 5.14:1 flat · 4.48:1 glowed */
  --dir-leave-on-dark:   #8CC2D8;        /* 4.83:1 flat · 4.21:1 glowed */

  /* Type — matching the live site's pairing */
  --ft: 'Roboto Condensed', 'Arial Narrow', Arial, sans-serif;  /* display */
  --fb: 'Carlito', Calibri, 'Segoe UI', system-ui, sans-serif;  /* body */

  --step--1: 0.8125rem;
  --step-0:  0.9375rem;
  --step-1:  1.125rem;
  --step-2:  1.5rem;
  --step-3:  2rem;
  --step-4:  2.75rem;
  --step-5:  clamp(2.5rem, 1.6rem + 4.5vw, 4.25rem);  /* the Pathfinder hero headline */

  --lh-tight:   1.15;
  --lh-display: 0.95;   /* Pathfinder sets its hero at .94 — near-solid leading */
  --lh-body:    1.6;
  /* Pathfinder tracks its eyebrows at 4px on an 11px face. That ratio is the
     single most recognisable thing about its typography, so it is kept. */
  --tracking-eyebrow: 0.34em;
  --tracking-display: -0.01em;

  /* Space — 4px base */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4.5rem;

  --measure: 62ch;
  --shell-max: 1180px;

  /* One radius, on everything that has one — buttons, inputs, notes, the copy
     field on the administration screen. A second, larger value was declared
     here for a while and never used by anything; a token nothing applies is a
     suggestion, not a system, so it is gone. Corners stay tight because the
     practice's own work is drawn with square edges. */
  --radius: 3px;

  /* Layout signature, measured out of mjmda_pathfinder_v1_1.html */
  --rule-accent-w: 3px;                   /* the orange rule under every header */
  --select-bar-w: 4px;                    /* selection = a left orange border */
  --select-tint: rgba(214, 116, 55, 0.05);
  /* The same tint composited over --off-white, which is the darkest ground it
     ever produces. It exists so the styleguide can MEASURE what sits on a
     selected card, a current rail step or a changed-answer block — a
     translucent layer is invisible to a contrast matrix, which is how
     --mid-grey came to fail there unnoticed. Recompute if --select-tint moves. */
  --surface-tint: #F3EFEC;
  /* THE SAME TINT OVER WHITE, which is a different colour and a different
     problem. --surface-tint above is --select-tint composited over --off-white,
     the darkest ground it makes. But a selected row inside a white PANEL — the
     Brief Builder's chosen services, the Jammer's Guide's current rail item —
     sits on this one instead, and it is lighter, so the ink on it has LESS
     contrast, not more.

     It exists because the styleguide could not see it and therefore nothing
     checked it, which is exactly how --mid-grey came to fail on the tinted
     ground unnoticed. Two pairings on this colour were measured at 4.31:1 and
     4.45:1 on 2026-08-28 and had to be moved to --orange-fill-h. Recompute by
     hand if --select-tint moves. */
  --surface-tint-white: #FDF8F5;
  --sidebar-w: 17rem;
  --banner-h: 21rem;                      /* fixed: the banner changes width, never height */                     /* Pathfinder uses 262px */
  /* On a phone 21rem is 336px of an 812px screen, and with the topbar and the
     search above them the first tool sat at 573px — you landed on the tools
     index and could not see a tool. The banner keeps its job, at a size that
     leaves the page room to be the page. Overridden below 30rem. */
  --ring-opacity: 0.07;                   /* its oversized concentric watermark */
  /* The radial wash on dark panels — see the note above .panel-dark::before.
     Pathfinder uses .08 on its hero and .12 on its result panel; Jan asked for
     slightly more than that. Raising it much further stops reading as light
     and starts reading as a second background colour. */
  --glow: 0.14;
  /* The charcoal blended --glow towards the orange: what the eye actually sees
     at the brightest point of the wash, and therefore the ground every on-dark
     ink has to clear. Declared as a real token so the styleguide can measure
     against it instead of against a surface nobody looks at. Recompute this by
     hand if --glow changes. */
  --surface-glow:  #5A4D41;

  /* Elevation. Two shadows, both accents rather than texture (A2 bans a rainbow
     of soft shadows on every card).
     --lift      marks something genuinely floating above the page: a modal, a
                 menu. At rest, on nothing else.
     --lift-hover is TRANSIENT — it exists only while a pressable thing is
                 hovered or focused, and disappears again. A card at rest still
                 has a rule and no shadow, which is what keeps the page flat. */
  --lift: 0 6px 24px rgba(29, 30, 28, 0.16);
  --lift-hover: 0 6px 18px rgba(29, 30, 28, 0.09);

  /* ── press physics ──────────────────────────────────────────────────────
     THE ONE INTERACTION MOMENT (A7: a hover/press micro-interaction, applied
     consistently, beats scattered effects). Measured off Pathfinder, which
     lifts its buttons, scale points and cards 2px on hover and drops a soft
     shadow under a card. That single behaviour is most of why the original
     feels responsive and the first build did not: nothing here moved at all,
     it only changed a border colour.

     Anything that can be pressed rises. Anything that cannot, does not — a
     tab, a text link and a disabled control all stay where they are, because
     movement is the affordance. */
  --rise: -2px;
  --press: 0px;                           /* the rise collapsing under a click */
  --t-press: 160ms cubic-bezier(0.2, 0.6, 0.2, 1);
  /* A bar travelling to a value it has just computed. Slow enough to read as
     the number arriving rather than the page repainting. */
  --t-reveal: 700ms cubic-bezier(0.4, 0, 0.2, 1);
  --border: 1px solid var(--light-grey);
  --border-strong: 1px solid #C4C4C4;
  /* Form controls need 3:1 against BOTH neighbours under WCAG 1.4.11, which the
     decorative border greys above do not reach. Interactive only. */
  --border-control-c: #8D8D8D;            /* 3.04:1 on the ground, 3.32:1 on white */
  --border-control: 1px solid var(--border-control-c);

  /* Focus ring. The identity orange is exactly 3.00:1 on the pale ground —
     passing with no margin — so pale surfaces use the darker fill tone.
     On the charcoal the identity orange is 2.86:1 and cannot INDICATE anything:
     a warm mid-tone on a warm mid-tone. So the things that have to be seen to
     work — the focus ring and the current-page marker — use MJM|DA's own tint,
     which reaches 5.39:1.

     TITLES ARE THE EXCEPTION AND USE THE REAL ORANGE (see components.css).
     A display word is decoration over a heading that is already white; the
     focus ring is the only thing telling a keyboard user where they are. The
     first can afford 2.86:1, the second cannot, and that is the whole reason
     two oranges exist on dark rather than one. */
  --orange-on-dark: #F9B68C;              /* 5.39:1 on --surface-dark. Their own
                                             tint, not one invented here.
                                             INDICATORS ONLY — titles use --orange. */
  --focus: var(--orange-fill);
  --focus-on-dark: var(--orange-on-dark);
}

/* ── the size of a form control ──────────────────────────────────────────
   NOT --step-0, even though it is the same number on a desktop. iOS Safari
   zooms the page in whenever a control under 16px takes focus and never zooms
   back out, and --step-0 is 15px — one pixel under. Every field on this site
   did it until 2026-09-02.

   A token rather than a rule, because a rule loses. base.css sets the control
   size through `.field input`, and five page stylesheets re-declare it for
   their own controls at higher specificity (`.jg-search-row input`, the
   estimate tables, the admin's dense selects) — a media query in base.css
   fixed the first and none of the others, silently. Pointing every one of them
   at this token means the answer is decided once and cannot be outranked.

   --control-fs-sm is for the deliberately dense controls in the administration
   screen. On a touch device it is the same 16px: on a phone there is no such
   thing as a small control if the price is a zoom you cannot undo. */
:root { --control-fs: var(--step-0); --control-fs-sm: var(--step--1); }
/* 64rem, not the 48rem the rest of the mobile work uses: an iPad in landscape
   is exactly 1024px, and an iPad WITH a keyboard reports pointer:fine — so the
   pointer clause alone would have left the one device most likely to be held
   and typed on at 15px. Measured at 768 and 1024 in a fine-pointer browser,
   which is what that iPad looks like. */
@media (pointer: coarse), (max-width: 64rem) {
  :root { --control-fs: 1rem; --control-fs-sm: 1rem; }
}

/* ── the micro label ─────────────────────────────────────────────────────
   The tracked upper-case labels that carry a count, a sheet name, a role or a
   date: "P1 SURVEY", "ALL JAMMERS", "REVISION 10TH MAY 2019". 11px is a fine
   caption on a screen a foot away and a squint on a phone held at arm's length
   in daylight, and 49 rules across eleven stylesheets had the number written
   into them by hand. One token, 12px on a phone — the floor for text anybody
   is expected to read. */
:root { --step-micro: 0.6875rem; }
@media (max-width: 47.99rem) {
  :root { --step-micro: 0.75rem; }
}

/* A phone is not a narrow desktop. The banner is the one element sized in
   absolute terms rather than by its content, so it is the one that has to be
   told. 15rem still holds the photograph, the clock and the greeting — the
   clock is a clamp on viewport width and comes down with it. */
@media (max-width: 30rem) {
  :root { --banner-h: 15rem; }
}

@media (prefers-reduced-motion: no-preference) {
  :root { --t-fast: 120ms ease; --t-med: 220ms ease; }
}
/* Reduced motion does not mean "the same movement, instantly" — a control that
   jumps 2px with no travel is worse than one that never moves. So the rise is
   zeroed outright and only the colour change remains. The hover shadow stays:
   it is a change of appearance, not motion, and it is the affordance a mouse
   user is relying on. */
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-med: 0ms; --t-press: 0ms; --t-reveal: 0ms;
          --rise: 0px; }
}