/* Semantic tokens — colour, salamcendekia-blog
 *
 * Intent-named values referencing primitives. THIS is what components code
 * against: a token says what a value is FOR, not what it IS. A component
 * referencing `--sc-navy` instead of `--color-heading` is a bug, and it is
 * what would break a future palette change.
 *
 * NOTE THE PRIMARY. `--color-primary` here is BLUE, where `systems/base` makes
 * it yellow. That is the substantive difference between the two systems and
 * the reason this one exists: the landing pages this blog sits beside use blue
 * for calls to action, and a reader crossing between them should not meet two
 * different affordance colours.
 *
 * Yellow is still present, as `--color-accent`. Scarce by intent — highlights,
 * a pull-quote rule, a badge — never the primary action.
 *
 * NO DARK THEME. `systems/base` defines light and dark because an internal
 * tool is used all day, often at night. A public article is read once, arrives
 * from search, and is as likely to be printed as re-opened. Adding a second
 * theme means every token pair and every contrast check exists twice, for a
 * surface with no evidence of demand. If demand appears, the pairs below are
 * where it goes.
 */

:root {
  /* Surfaces */
  --color-background: var(--sc-bg);
  --color-background-soft: var(--sc-bg-soft);
  --color-background-warm: var(--sc-bg-cream);
  --color-surface: var(--sc-white);

  /* Text, three tiers matching the primitive set.
     `--color-body` is deliberately the muted tone rather than the darkest:
     the landing page sets `p` to --sc-text-muted, and long-form text set in
     near-black on white is harsher than it needs to be. */
  --color-heading: var(--sc-navy);
  --color-body: var(--sc-text-muted);
  --color-body-strong: var(--sc-text);
  /* THE SIZE FLOOR IS IN THE NAME -- #92.
     This was `--color-body-subtle`, which measures 3.48:1 on
     --color-background: below AA's 4.5:1 for normal text, and passing only at
     the 3.0 threshold WCAG allows for LARGE text (>=18.66px bold or >=24px
     regular).
     The value is legitimate -- the landing page uses it under headlines -- so
     deleting it would lose a tone the brand actually uses. But the constraint
     was a comment, and this repository has already found that shape of bug
     three times: `contrast.py`'s own docstring names two, and #88 was a third.
     A comment does not survive a component author in a hurry.
     `checks/contrast.py` cannot express "compliant above a size": `@non-text`
     annotates a token PAIR, and nothing ties a colour to a size range. So the
     constraint moved into the name instead, where it is visible at every call
     site rather than at the declaration nobody re-reads.
     `--color-large-text-subtle` cannot be used for body copy without the
     author writing "large-text" on a line that sets 14px, which is the kind of
     wrong a reviewer sees. That is weaker than a check and stronger than a
     comment, and it is the strongest thing available here.
     WHAT COUNTS AS LARGE: >=24px regular, or >=18.66px semibold or heavier.
     The only semantic role licensed to use this token is
     --text-article-lead, and only WITH --text-article-lead-weight: at 22px
     regular it would qualify as neither, which review of #92 caught. Pair the
     colour with a size AND a weight, or do not use it. */
  --color-large-text-subtle: var(--sc-text-subtle);

  /* Action. Blue, not yellow — see the note above. */
  --color-primary: var(--sc-blue);
  --color-primary-hover: var(--sc-navy);
  --color-primary-foreground: var(--sc-white);

  /* Accent. Yellow, used sparingly. */
  --color-accent: var(--sc-yellow);
  --color-accent-soft: var(--sc-yellow-soft);
  /* The accent's hover tier. Added in #114 with the CTA pill, which is the
     first component in this system to render the accent pair at all. */
  --color-accent-strong: var(--sc-yellow-deep);
  --color-accent-foreground: var(--sc-navy);

  /* Links inside prose. Blue at rest, navy on hover, so the hover state
     darkens rather than shifting hue. */
  --color-link: var(--sc-blue);
  --color-link-hover: var(--sc-navy-dark);

  /* Structure */
  --color-border: var(--sc-border);
  --color-border-strong: var(--sc-text-subtle);

  /* Focus. Blue-light rather than the primary blue: it must stay visible ON
     the primary blue, which the primary itself would not. */
  --color-focus: var(--sc-blue-light);
}