/*
 * tokens.css — the design system, in ONE place.
 *
 * Loaded before every other stylesheet of ours. nav-v2.css, footer-v2.css and
 * site.css map their component-local names off these and declare no colour of
 * their own; before this file the same palette was written out twice and a
 * value changed in one had to be remembered in the other.
 *
 * Nothing here is invented. Every value is measured — from the live /about/
 * page, from the logo, from the site's own footer, or from the product
 * photography — and the provenance is on the line.
 *
 * tools/verify.py's theme-contrast check reads this file and computes the
 * WCAG ratio for every declared pair, in both blocks. It is the one part of
 * contrast testing that is arithmetic rather than rendering, so it belongs in
 * the gate rather than in someone's memory.
 */

:root {
  /* — Ink, sampled from the logo. #101018 carries a slight COOL cast (B+8),
       so the greys are built on that cast. Getting this wrong is what makes
       monochrome look muddy rather than expensive. — */
  --ink:          #101018;
  --paper:        #FFFFFF;
  --grey-9:       #2B2B2B;   /* measured — /about/ body text */
  --grey-5:       #70707E;   /* 4.87:1 on white. #8A8A94 was here and scored
                                3.42:1 — below AA — on every eyebrow, caption
                                and stat label on the site. */
  --grey-2:       #E4E4E8;   /* the hairline */
  --grey-1:       #F4F4F6;

  /* — The site's own dark surfaces, read off the captured footer rather than
       chosen: #000000 is the vc_custom row it already used, #262626 the strip
       above it. The header now uses the same black, so the bar at the top and
       the block at the bottom are one colour rather than two arguing darks. — */
  --black:        #000000;
  --black-strip:  #262626;
  --rule-dark:    #2A2A2A;
  --raised-dark:  #0B0B0B;   /* a panel lifted off the black, e.g. a dropdown */
  --hover-dark:   #171717;   /* the hover ground inside one */
  --fg-dark:      #DDDDDD;   /* the single most-used colour on the site, 529x */
  --dim-dark:     #B9B9C2;

  /* — Accent. The logo is monochrome, so this is a system decision:
       #8A583C is the leather tan measured out of the site's own product
       photography. Used once per view. — */
  --accent:       #8A583C;   /* 5.93:1 with white ON it — button grounds */
  --accent-deep:  #6E4429;
  --accent-light: #D8A87F;   /* 9.83:1 on black. #8A583C is only 3.54:1 there,
                                so THIS is the accent for dark surfaces and
                                #8A583C is never text on black. */

  /* — Type. Palatino Linotype is Hibrkraft's signature face; everything after
       it in --display is a fallback chosen for matching proportions. No
       @font-face, no CDN: Palatino ships with macOS and Windows both. — */
  --sans:    Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: "Palatino Linotype", Palatino, "Book Antiqua",
             "Iowan Old Style", Georgia, serif;
  --t-micro: 0.6875rem;      /* 11px — eyebrows and column headings */
  --t-sm:    0.8125rem;      /* 13px — measured button size */

  /* — The prose typeset, measured off a blog post, which is the only place on
       this site the original theme typography survived untouched. Everything
       else was generated and drifted. 24px PT Serif on a 32em measure renders
       at 64 characters per line; the landing pages were running 103-164. — */
  --prose:       "PT Serif", Georgia, "Times New Roman", serif;
  --prose-size:  1.5rem;     /* 24px — the blog's */
  --prose-lh:    1.458;      /* 34.99px at 24px — the blog's */
  --prose-fg:    #212121;    /* the blog's, 16.1:1 on white */
  --prose-ls:    -0.01em;
  --measure:     32em;       /* 768px at 24px = 64 characters */

  --container: 1170px;       /* measured */
  --radius:    0;            /* measured: square. Crisp corners are most of why
                                this reads as considered rather than templated */

  /* — Semantic. Components read these, never the primitives. — */
  --bg:         var(--paper);
  --fg:         var(--grey-9);
  --fg-heading: var(--ink);
  --fg-muted:   var(--grey-5);
  --hairline:   var(--grey-2);
}

/*
 * The dark surface set. These are the values the black navigation bar and the
 * footer use today, declared here so they are checked rather than trusted.
 *
 * The selector is where they will live when the site gains a theme toggle; it
 * matches nothing right now, which is why the chrome maps them by name in
 * nav-v2.css and footer-v2.css instead. The VALUES are the ones in use.
 */
:root[data-theme="dark"] {
  --bg:         #000000;
  --fg:         #DDDDDD;     /* 15.46:1 */
  --fg-heading: #FFFFFF;     /* 21.00:1 */
  --fg-muted:   #B9B9C2;     /* 10.78:1 */
  --accent:     #D8A87F;     /*  9.83:1 — NOT #8A583C, which is 3.54:1 here */
  --hairline:   #2A2A2A;
}

/*
 * THIRD-PARTY BRAND COLOUR. Not part of the palette.
 *
 * The interface is achromatic on purpose — the products carry the colour, and
 * partner logos render grayscale because they are other people's brand marks.
 * This is the one deliberate exception: operator's instruction, 2026-08-11, is
 * that the floating WhatsApp button use WhatsApp's own green, because
 * recognition converts and the button exists to be recognised.
 *
 * It is declared HERE rather than in site.css so the rule that this file is
 * the single source for every colour still holds. It is namespaced --wa- so
 * nothing mistakes it for part of the site palette.
 *
 * ON WHITE TEXT, WHICH IS WHAT WHATSAPP ITSELF USES: #FFFFFF on #25D366 is
 * 1.98:1 and fails AA outright. It survives on their app icon because a glyph
 * is not text; it does not survive on a labelled button. So the foreground is
 * --ink, measured below, and the green is unchanged.
 */
:root {
  --wa-green:      #25D366;   /*  9.54:1 with --ink ON it  */
  --wa-green-deep: #1DA851;   /*  6.11:1 with --ink ON it — hover */
}