/* MusterHQ design tokens (v3, 2026-10-20). The one source of every colour, face
   and corner size on the site and in the app; brand/BRAND.md section 3 is the
   same table in words. Every page links this file first.

   Decided by the owner on 2026-10-20, from a sweep that rendered every page as
   every role and recorded what was actually drawn (237 colours, 50 of them
   on the old brand book):
   - the neutrals are the ones most pages already drew (ink #15241E, dark
     #101C18, paper #F5F6F2, muted #526359, line #DCE2DA), and the brand book
     now says so;
   - the main button is green everywhere: --brand-btn with white words on a
     light surface, --accent-on-dark with dark words on a dark one.

   Every text colour below is measured against the surface it is for, and
   clears WCAG AA (4.5:1) there; the ratio is beside it.

   How it reaches every page. Many pages still carry their own copy of the old
   colours in :root, and :root here cannot out-rank a later :root. So the same
   values are also declared on the body of each page family (body.as for the
   signed-in app, body.mh-site for the website), which every element inherits
   from and which a page's :root copy cannot reach. The legacy names those
   copies use (--navy, --slate, --as-t1, --mh-ink, --ms-ink and the rest) are
   pointed at the tokens there too, so a page that still says var(--slate)
   draws --muted. */

:root,
body.as,
body.mh-site {
  /* One green family, one job each */
  --brand:              #1FA85D;  /* fills, bars, icons, the tile. Never small text (3.08:1 on white) */
  --brand-dark:         #0C6637;  /* green that is the words on light: 7.07 white, 6.51 paper */
  --brand-btn:          #0F8044;  /* the main button on light, white words on it: 5.01 */
  --brand-btn-hover:    #0C6637;
  --brand-soft:         #E2F4EA;  /* tint behind a green badge */
  --accent-on-dark:     #2FD07D;  /* the accent on dark, and the main button there: 8.69 on --dark */
  --accent-on-dark-hover: #5BDC98;
  --accent-on-dark-ink: #101C18;  /* words on the bright green button */

  /* Light surfaces */
  --paper:       #F5F6F2;  /* the page */
  --card:        #FFFFFF;  /* cards, inputs, sheets */
  --alt:         #EEF1EC;  /* a quiet fill: table heads, wells, selected rows */
  --line:        #DCE2DA;  /* every hairline on light */
  --line-strong: #C5CEC4;  /* input borders, dividers that must be seen */

  /* Words on light */
  --ink:     #15241E;  /* headings and body: 16.12 white, 14.85 paper */
  --muted:   #526359;  /* secondary words: 6.39 white, 5.88 paper, 5.61 alt */
  --subtle:  #5D6B61;  /* captions, meta, icons: 5.61 white, 5.17 paper */

  /* Dark surfaces: top bar, sidebar, dark panels, footer */
  --dark:          #101C18;
  --dark-raised:   #263B30;  /* hover, the selected nav item, icon buttons on dark */
  --dark-line:     #304637;
  --on-dark:       #F5F6F2;  /* 16.1 on --dark, 11.05 on --dark-raised */
  --on-dark-muted: #C3D0C5;  /* 10.95 on --dark */
  --on-dark-subtle:#8FA595;  /* group heads: 6.65 on --dark, 4.56 on --dark-raised */

  /* Status. Always with an icon and a word, never colour alone. Each is text
     and fill: white on each clears 4.5:1, and each reads on its soft tint. */
  --success:      #0F7A37;  --success-soft: #E6F3EA;  --success-on-dark: #34D07F;
  --info:         #2563EB;  --info-soft:    #EAF1FE;  --info-on-dark:    #5B8DEF;
  --warning:      #6D28D9;  --warning-soft: #F1EAFC;  --warning-on-dark: #A78BFA;  /* violet, not amber */
  --danger:       #C81E1E;  --danger-soft:  #FBECEC;  --danger-on-dark:  #F26D6D;

  /* Type */
  --font-display: 'Archivo', system-ui, sans-serif;       /* headings 600 to 800 */
  --font-body:    'Inter', system-ui, sans-serif;         /* everything read, 400 to 700 */
  --font-mono:    'Geist Mono', ui-monospace, monospace;  /* labels, chips, kickers */

  /* Corners: controls, cards, sheets, pills */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* Shadows, tinted with the ink rather than a cold blue-grey */
  --shadow-xs: 0 1px 3px rgba(21, 36, 30, .06);
  --shadow-sm: 0 4px 12px rgba(21, 36, 30, .07);
  --shadow-md: 0 12px 32px rgba(21, 36, 30, .09);
  --shadow-lg: 0 24px 64px rgba(21, 36, 30, .10);
}

/* The names older pages and stylesheets use, pointed at the tokens. Declared
   on the body of each family so a page's own :root copy cannot win, and on
   :root for a page whose body is marked only once its script runs (Fleet's
   online payments). Remove a name from here only once no page or stylesheet
   uses it. tests/brand-colours.test.js fails on a name that loops. */
:root,
body.as,
body.mh-site {
  /* styles.css and the pages that copied its :root */
  --navy: var(--dark);  --navy-mid: var(--dark-raised);  --navy-light: var(--dark-raised);
  --brand-light: var(--brand-soft);
  --bg: var(--paper);  --bg-alt: var(--alt);  --white: var(--card);  --cream: var(--paper);
  --slate: var(--muted);  --slate-light: var(--subtle);
  --text: var(--ink);  --text-muted: var(--muted);
  --t1: var(--ink);  --t2: var(--muted);  --t3: var(--subtle);
  --success-bg: var(--success-soft);  --info-bg: var(--info-soft);
  --warning-bg: var(--warning-soft);  --danger-bg: var(--danger-soft);
  --font-head: var(--font-display);
  --r-xs: var(--radius-sm);  --r-sm: var(--radius-sm);  --r: var(--radius-md);
  --r-lg: var(--radius-lg);  --r-xl: var(--radius-lg);  --r-full: var(--radius-pill);

  /* appshell.css */
  --as-ink: var(--dark);  --as-ink-2: var(--dark-raised);  --as-ink-3: var(--dark-raised);
  --as-paper: var(--paper);  --as-white: var(--card);
  --as-line: var(--line);  --as-line-d: var(--dark-line);
  --as-t1: var(--ink);  --as-t2: var(--muted);  --as-t3: var(--subtle);
  --as-brand-sf: var(--brand-soft);
  --as-ready: var(--success);  --as-review: var(--info);
  --as-caution: var(--warning);  --as-fail: var(--danger);
  --as-font-disp: var(--font-display);  --as-font-body: var(--font-body);  --as-font-mono: var(--font-mono);

  /* marketing-system.css and app-system.css */
  --mh-ink: var(--ink);  --mh-muted: var(--muted);  --mh-paper: var(--paper);
  --mh-dark: var(--dark);  --mh-line: var(--line);  --mh-accent: var(--accent-on-dark);

  /* marketing.css */
  --ms-ink: var(--ink);  --ms-paper: var(--paper);  --ms-line: var(--line);
  --ms-accent: var(--brand);  --ms-cta: var(--brand-btn);  --ms-cta-2: var(--brand-dark);
}

/* Phones. A text box, list or date under 16 px makes iPhone Safari zoom the
   whole page in when it is tapped, and leaves it zoomed; and a box under
   44 px tall is a hard target with a glove on. Many pages size their own
   fields smaller, so these win on a phone only. tools/phone-audit measures
   both. */
@media (max-width: 640px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=color]),
  select,
  textarea {
    font-size: 16px !important;
  }
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=color]),
  select {
    min-height: 44px;
  }
  /* Small text links that stand alone (See all, Review, Back, Forgot
     password): a 44 px tall place to tap, with the same look and nothing
     around them moved (the padding is taken back by the margin). */
  .card-action, .card-head-action, .fd-link, .back-link, .forgot-link, .forgot, .access-back, .login-link, .tap-pad {
    display: inline-block;
    padding-top: 12px; padding-bottom: 12px;
    margin-top: -12px; margin-bottom: -12px;
  }
}