/* tokens.css — the colours the served stylesheets draw in.
   Loaded by the page (a <link> in the <helmet>) and by templates/card.html,
   so a face drafted in the template editor and the same face on the felt are
   inked from one file.

   This is the MASTER for a suit's colour. The page used to hold the four inks
   again as JS constants (CARD_INK / SUIT_INK_TWO / SUIT_INK_FOUR) to paint the
   settings deck preview; those are gone and the preview wears the same
   `.suit-ink` attributes the card face does — one place defines what a heart
   looks like, and the preview cannot drift from the felt it is previewing.

   It is also the master for THE CLOTH (the --felt-* block at the bottom):
   every felt-coloured surface on the page reads those, and the settings hue
   slider turns them all with one number.

   Everything else the page draws is still a JS constant in the logic block
   (PAPER, BRASS, …) and is NOT repeated here. The three non-suit tokens
   below are the ones styles/card.css needs; a token nothing in the serving
   path reads does not belong in a file the player downloads. */
/* Card ink, one map per deck. Players kept misreading a spade for a club and a
   heart for a diamond — at the board's 60px slot the two black suits are the
   same blot and the two red ones the same smear, and the colour was carrying no
   information at all within each pair. The four-colour deck gives each suit its
   own hue, which is what the shape was failing to do.

   Spades keep the near-black they always had and hearts their claret, so a
   player who switches only has to learn two of the four. Diamonds take an ink
   blue, dark enough to hold its weight on `PAPER` without closing on the
   spade's near-black — one step darker still and the two start to muddy at the
   board's 47x68 slot, which is the size that decides it.

   The club green is chosen on HUE, not lightness. The first one tried, #1f7a3f,
   sat at ~141° — inside the felt's own blue-green family (#103a2e is ~160°) —
   and a green that belongs to the table reads as part of the table rather than
   as a suit. #28872f is a leaf green at ~124°, far enough round the wheel to be
   its own colour, and lifted a little in brightness so it keeps separating at
   card size rather than only in a swatch. */

:root {
  /* the four suit inks — the rationale for each value is above */
  --spadeclr: rgb(14, 50, 37);
  --heartclr: rgb(143, 43, 52);
  --diamondclr: rgb(26, 79, 133);   /* four-colour deck only */
  --clubsclr: rgb(40, 135, 47);     /* four-colour deck only */

  /* WHICH ink each suit wears. The deck setting is one attribute on the root
     (`data-deck`, set by the page), so switching decks flips two variables
     here and every face and swatch follows. Four-colour is the default, the
     same default the setting has. */
  --suit-s: var(--spadeclr);
  --suit-h: var(--heartclr);
  --suit-d: var(--diamondclr);
  --suit-c: var(--clubsclr);

  /* card.css also needs these three: the show/muck outline, the ghost's
     ground, and the ghost's ink. They mirror the page's BRASS / INK / PAPER. */
  --brass: rgb(201, 169, 97);
  --ink: rgb(27, 32, 28);
  --paper: rgb(234, 230, 220);
}

/* two-colour deck: diamonds wear the heart's red, clubs the spade's ink */
:root[data-deck="two"] {
  --suit-d: var(--heartclr);
  --suit-c: var(--spadeclr);
}

/* THE CLOTH. Every felt-coloured surface is one of these, and each is its
   original colour with `--felt-shift` degrees added to its hue — so at 0, the
   default, the page is the suited green to the pixel, and the settings slider
   turns the whole cloth with one number. Saturation and lightness never move.
   The page links this sheet in its real <head> because the page background is
   --felt: it has to be in before the first paint. The `-c` pair are bare hsl
   channels, for the translucent uses: hsl(var(--felt-deep-c) / .92). */
:root {
  --felt-shift: 0;
  --felt-c: calc(162.86 + var(--felt-shift)) 56.76% 14.51%;       /* #103a2e */
  --felt-deep-c: calc(160.65 + var(--felt-shift)) 58.49% 10.39%;  /* #0b2a20 */
  --felt: hsl(var(--felt-c));
  --felt-deep: hsl(var(--felt-deep-c));
  --felt-hi: hsl(calc(160.31 + var(--felt-shift)) 55.17% 22.75%);   /* #1a5a45 */
  --felt-mid: hsl(calc(163.02 + var(--felt-shift)) 56.99% 18.24%);  /* #14493a */
  --felt-lo: hsl(calc(160.71 + var(--felt-shift)) 58.33% 9.41%);   /* #0a261d */
  /* the darks laid OVER the cloth — the showdown dim, the modal scrims, a
     dimmed marker. Near-black, but tinted with the cloth's hue, so they turn
     with it; a green-black veil over a blue table reads as a stain. Bare
     channels: every use sets its own alpha. */
  --felt-veil-c: calc(152.73 + var(--felt-shift)) 37.93% 5.69%;  /* rgb(9,20,15) */
  --felt-scrim-c: calc(156.92 + var(--felt-shift)) 48.15% 5.29%;  /* rgb(7,20,15) */
  --felt-scrim-lo-c: calc(158.57 + var(--felt-shift)) 53.85% 5.1%;  /* rgb(6,20,15) */
  --felt-mark-c: calc(158.33 + var(--felt-shift)) 56.25% 12.55%;  /* rgb(14,50,37) */
  /* the staking page's segmented keys (engine/staking-render.js): idle and
     pressed, each a two-stop gradient */
  --felt-key-hi: hsl(calc(160.33 + var(--felt-shift)) 51.26% 23.33%);     /* #1d5a46 */
  --felt-key-lo: hsl(calc(161.18 + var(--felt-shift)) 52.58% 19.02%);     /* #174a3a */
  --felt-key-on-hi: hsl(calc(161.35 + var(--felt-shift)) 48.68% 29.8%);  /* #27715a */
  --felt-key-on-lo: hsl(calc(160.62 + var(--felt-shift)) 51.18% 24.9%);  /* #1f604b */
  /* one-off members of the family: a lit pulse, the logo pip's cut-out, the
     dealer disc's ground, a recessed well, a scrim */
  --felt-dim: hsl(calc(161.38 + var(--felt-shift)) 67.44% 8.43%);  /* #07241b */
  --felt-lit: hsl(calc(160.52 + var(--felt-shift)) 56.2% 26.86%);  /* #1e6b52 */
  --felt-pip: hsl(calc(160.62 + var(--felt-shift)) 67.01% 19.02%);  /* #10513c */
  --felt-shade-c: calc(160.91 + var(--felt-shift)) 55% 7.84%;  /* #091f18 channels */
  --felt-well: hsl(calc(157.5 + var(--felt-shift)) 54.55% 8.63%);  /* #0a2219 */
}

/* The landing page is always the suited green. The page sets this attribute
   on the root while that screen is up; `!important` is what lets a sheet rule
   beat the inline `--felt-shift` the slider writes. */
:root[data-felt-lock] { --felt-shift: 0 !important; }