/* Simple MarkUp's identity, scoped to .theme-markup. TOKENS ONLY.
 *
 * Never :root. On the home page this class would sit on Simple MarkUp's
 * product band alone, so the shell around it stays colourless; on /markup/ it
 * sits on <body>. That is how the two products get bands of their own without
 * either giving ground — the decision theme-simple.css reserved this path for,
 * now being used for the first time.
 *
 * The layout these tokens colour is product.css, which loads after this file.
 *
 * THE AMBER IS THE POINT. Simple .md owns the family's blue and the shell is
 * otherwise entirely cool, so a warm accent tells the two bands apart at a
 * glance. It also happens to be the right colour for a highlighter, which is
 * what the product is — but the reason it can be used is that every value was
 * measured, not that it reads well. PALETTE.md §3.6: any new product tint must
 * clear 4.5:1 against that theme's --muted, because muted body text sits on
 * it. #FCF6EA measures 4.60:1. And §5's warning — "the mid-tone brand colour
 * always fails as a fill under white" — is why --accent is #8A6420 and not the
 * lighter ochre it looks like it should be.
 *
 * Ratios below are against the shell's own tokens (canvas #F6F5F1 / paper
 * #FFFFFF / muted #68717C light; canvas #111418 / paper #191D22 / muted
 * #A5ADB7 dark), computed rather than eyeballed, and re-computed by the site
 * owner on intake rather than taken from the handoff — all twelve reproduce.
 * In-context pairs the handoff did not measure were checked too: the accent as
 * a link ON ITS OWN BAND is 4.97:1 light and 9.16:1 dark, ink on the band is
 * 17.3:1 and 15.6:1, and the ring against the band is 3.52:1 and 9.16:1.
 *
 * Change one value and every ratio in its row has to be recomputed. The
 * palette rule is that a colour has one role.
 */

.theme-markup {
  /* #8A6420 ochre. White on it 5.35:1 (fill text, >= 4.5). As a link on canvas
     4.91:1, on paper 5.35:1, on its own band 4.97:1. Not the ring — the ring
     carries no text and can afford to be lighter. */
  --accent:       #8A6420;
  --accent-hover: #6E4F16;   /* white on it 7.52:1 */
  --accent-ring:  #A67C2E;   /* on canvas 3.47:1, on band 3.52:1 — clears the 3:1 UI threshold */
  /* CANVAS, not a warm tint, and this is the Owner's call on 25 August 2026:
     "the back colour is wrong ... it needs to be the same beige as the first
     section. There is a pattern and we don't want to introduce another colour
     that looks wrong."

     He is right and it was flagged on intake: #FCF6EA is 1.01:1 against canvas
     #F6F5F1 and carries 18 points of chroma against canvas's 5, so it reads as
     a FOURTH near-beige — the beige gone slightly wrong — rather than as a
     tint. On the home page it sat directly under Simple .md's cool band, where
     the comparison is unavoidable.

     THE PALETTE FORBIDS THE OBVIOUS FIX. Pushing the warmth far enough to read
     as deliberate breaks §3.6, which requires a band to clear 4.5:1 against
     that theme's --muted, because muted body text sits on it. Measured:
     #F7F0E2 is 4.37, #F4EBDA 4.18, #F1E7D3 4.03. All fail. The only warm
     values that pass are the ones too close to canvas to be worth having,
     which is where #FCF6EA came from in the first place.

     So the tint goes, and the band is told apart by its hairlines and by the
     accent it carries — the amber tagline and the amber button, which are what
     actually distinguish this product from Simple .md's blue. --band-line does
     the work the tint was failing to do. */
  --band:         #F6F5F1;   /* canvas; vs --muted 4.54:1 */
  --band-line:    #DDE1E5;   /* the shared hairline, same as theme-simple light */
  --btn-border:   #D8C7A2;   /* secondary-button outline; a border, exempt from 4.5 */
  --on-accent:    #FFFFFF;
}

@media (prefers-color-scheme: dark) {
  .theme-markup {
    /* The inversion, the same rule as theme-simple and PALETTE.md §2.3: in
       light the primary button is light text on a dark fill, in dark it is
       dark text on a light fill. White on #E0B978 would be ~2:1 and unusable;
       dark ink on it is 10.0:1. This looks like a mistake in a screenshot and
       is not one. */
    --accent:       #E0B978;   /* as a link on dark canvas 10.0:1, on the dark band 9.16:1 */
    --accent-hover: #EAC98D;   /* on dark canvas 11.6:1 */
    --accent-ring:  #E0B978;   /* on dark canvas 10.0:1 (>= 3:1) */
    /* The dark counterpart, same decision: #221C12 against dark canvas #111418
       is a warm brown that reads as a stain rather than a band. Canvas. */
    --band:         #111418;   /* dark canvas; vs --muted dark 8.10:1 */
    --band-line:    #30363D;   /* the shared dark hairline */
    --btn-border:   #4A4132;   /* the warm analogue of theme-simple's #46525F */
    --on-accent:    #111418;
  }
}