/* SyntaxFlow Compras y Familia — the two product colours, written once.
   ===========================================================================
   The only file where the colours of Compras and Familia are written. Every
   page that shows them loads it first: the home's three entries
   (px-home.css), the hubs and landings (px-landing.css), the two apps and the
   plans (px-base.css, px-compras.css, px-familia.css, px-planes.css), and
   tools/make-px-og.mjs reads it for the link-preview images. Nothing else may
   repeat these values (tools/test/px-pulido.test.cjs checks it).

   WHY THESE TWO COLOURS
   The site already gives a hue to each world: bottle green (glass, 170°),
   steel blue (windows and aluminium, ~208°), sand and terracotta (envelope,
   ~15°), graphite and amber (metal, ~39°), walnut and oak (wood, ~29°), and
   drafting-ink indigo with a coral pencil (documents, 231° / 13°). Red and
   amber also mean "fail" and "warning". The free part of the wheel is
   violet-to-magenta, so:
     --px-compras  violet  #6439A5 (264°) light · #C1A8F2 dark
     --px-familia  berry   #9A3470 (325°) light · #F29BC4 dark
   Violet sits 33° away from the documents' indigo and is much brighter, so
   it does not read as "documents"; berry sits 38° away from the fail red and
   50° from terracotta, and every state also carries text and an icon, so no
   meaning rests on the colour alone. The two are 61° apart and differ in
   lightness, which keeps them apart for red-green colour blindness too.
   Contrast (WCAG 2.x), measured:
     #6439A5 on white 7.86:1, on --paper 6.97:1; white on it 7.86:1
     #9A3470 on white 6.78:1, on --paper 6.00:1; white on it 6.78:1
     #C1A8F2 on dark --surface 7.99:1; #0E1316 on it 9.04:1
     #F29BC4 on dark --surface 8.08:1; #0E1316 on it 9.13:1
   so both work as text, as links and as a button background, in both
   themes (AA asks 4.5:1 for normal text; every pair above clears it).
   The ink on a product-coloured fill is --px-*-ink (white in light, near
   black in dark).

     --px-compras-deep / --px-familia-deep   the deep colour. Theme-independent:
       the opening bands and the home's entries use it in light and dark alike,
       always with white on top (7.86:1 and 6.78:1).
     --px-compras-pale / --px-familia-pale   the light colour, for dark surfaces.
     --px-compras / --px-familia             the colour as text, link or button
       on the page's own surface: deep in light, pale in dark.
     --px-compras-ink / --px-familia-ink     the text on a --px-compras /
       --px-familia fill: white in light, near black in dark.
   =========================================================================== */
:root{
  --px-compras-deep:#6439A5; --px-compras-pale:#C1A8F2;
  --px-familia-deep:#9A3470; --px-familia-pale:#F29BC4;
  --px-compras:var(--px-compras-deep); --px-compras-ink:#FFFFFF;
  --px-familia:var(--px-familia-deep); --px-familia-ink:#FFFFFF;
}
@media (prefers-color-scheme: dark){
  :root{
    --px-compras:var(--px-compras-pale); --px-compras-ink:#0E1316;
    --px-familia:var(--px-familia-pale); --px-familia-ink:#0E1316;
  }
}