/* Every colour, face, radius and easing the site uses. Nothing else in the CSS
   states a colour: site.css and acrostic.css reference these and only these.

   "Neon aqua" — built out from #3CFBF2. The page is a saturated aqua rather
   than paper, the board is the near-black teal that colour dries down to, and
   the raw #3CFBF2 is kept back for the dark board, where a colour that bright
   is the only place it can actually sing.

   The per-puzzle accents are the RGB rotations of the base — swap the channels
   of #3CFBF2 and you get magenta and yellow — plus the two hues between them.
   They are all far from teal on the wheel because teal is the surface here: an
   accent has to be something the ground is not. */

:root{
  /* ---- page ---- */
  /* Saturated, not pale. Every ink below is set against this one value, so
     deepening it costs contrast everywhere at once — run npm run check:contrast
     after touching it, and expect the accent inks to need darkening with it. */
  --page:#a9f0e7;
  --page-deep:#7fe3d8;      /* the wash under the fold, and hard-shadow edges */
  --card:#effdfb;
  --ink:#062b2e;
  --slate:#245c5e;          /* body copy and secondary text, 5.9:1 on --page */
  --dim:#3d6b6c;            /* 10-12px uppercase meta, held at 4.7:1 */
  --muted:#537d7e;          /* struck-through tips: recedes, still legible */
  --rule:#7ad6cd;
  --rule-firm:#45bdb2;      /* the borders that carry structure rather than hint at it */

  /* ---- the base colour itself ---- */
  /* #3CFBF2 is too light to set text on anything pale, so it is used as a fill
     and only ever on the dark board or against --ink. */
  --glow:#3cfbf2;
  --glow-soft:rgba(60,251,242,.3);
  --glow-line:rgba(60,251,242,.34);

  /* ---- board ---- */
  --board:#04262a;
  --board-line:#0d474b;
  --tile:#f8fffe;
  --tile-ink:#04262a;
  --tile-fig:#6f918f;       /* the position number on an unrevealed tile, 3.4:1 */
  --punc:#3cfbf2;

  /* ---- answer slots ---- */
  --slot-line:#7fcfc8;
  --slot-fig:#578f8d;

  /* ---- controls ---- */
  --placeholder:#528d8a;
  --dupe-line:#8cc4bf;      /* the field border on an already-found word */
  --ink-lift:#0e4247;       /* a dark button, hovered */
  --on-accent:#062b2e;      /* figures set on a filled accent — always the ink */

  /* shadows, cast in the board's own hue so nothing reads grey */
  --shadow-board:rgba(4,38,42,.5);
  --shadow-card:rgba(4,38,42,.3);

  /* ---- type ---- */
  /* Three roles, three faces. Bricolage Grotesque is the voice — it has enough
     wonk in its skeleton that a heading stops looking like a default. Fraunces
     carries the letters on the board and the figures, with SOFT and WONK turned
     up so a revealed sentence reads as something printed rather than typed.
     Figtree is the workhorse: a tall x-height is what keeps a 15px clue sharp. */
  --display:"Bricolage Grotesque","Segoe UI",Helvetica,Arial,sans-serif;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --ui:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  /* ---- shape ---- */
  /* Tiles and slots are near-square, as the POC had them. A letter sitting in a
     rounded-off box reads as a button; sitting in a crisp one it reads as a
     square on a board, which is what it is. */
  --radius-tile:3px;
  --radius-slot:2px;
  --radius-row:10px;
  --radius-card:14px;
  --radius-pill:999px;

  /* motion — one spring, used everywhere something appears or lifts */
  --spring:cubic-bezier(.34,1.56,.64,1);
  --ease:cubic-bezier(.2,.9,.3,1);

  /* accent: the default, used by pages that are not a puzzle.
     --accent      fills (hairline, lead slot, reveal flash) and lit borders
     --accent-ink  the same hue dark enough to set text on the page (AA at 14px)
     --accent-deep borders against a filled accent, and a card's resting border
     --accent-soft the tint behind an armed or current control
     --accent-glow the halo a hovered or just-hit control blooms

   --accent-soft is an opaque tint, not the accent at low alpha. A translucent
   wash darkens whatever it sits on, so the same chip that cleared AA on the
   page failed it on a card, and every alpha nudge had to be re-checked against
   both grounds. These tints are all at least as light as --page, which makes
   the accent-ink-on-wash pair safe by construction.

   --accent-glow is the one accent token that IS translucent, because a glow has
   to take the colour of whatever it blooms over — the mint page, the near-black
   board — and it never lands under text, so it owes nothing to contrast. */
  --accent:#ff5c47;
  --accent-ink:#bc2719;
  --accent-deep:#e03a26;
  --accent-soft:#ffe3dd;
  --accent-glow:rgba(255,92,71,.5);
}

/* One accent per puzzle, picked from its number, so consecutive days look
   different with nothing to author. Four is enough that a run of puzzles never
   repeats twice in a row, and few enough that the site keeps one identity.

   The selector is attribute-only, not body-only: the puzzle page sets it on
   <body>, and the archive sets it per row, so a list of puzzles reads as a run
   of colours. Custom properties inherit, so either way the whole subtree follows. */
[data-accent="0"]{           /* coral */
  --accent:#ff5c47;
  --accent-ink:#bc2719;
  --accent-deep:#e03a26;
  --accent-soft:#ffe3dd;
  --accent-glow:rgba(255,92,71,.5);
}
[data-accent="1"]{           /* gold — the yellow rotation, pulled warm */
  --accent:#ffc53d;
  --accent-ink:#8f5500;
  --accent-deep:#e0a016;
  --accent-soft:#fff0cf;
  --accent-glow:rgba(255,197,61,.55);
}
[data-accent="2"]{           /* magenta — #3CFBF2 with its channels swapped */
  --accent:#f23cfb;
  --accent-ink:#a814a3;
  --accent-deep:#c91fd4;
  --accent-soft:#fde0ff;
  --accent-glow:rgba(242,60,251,.5);
}
[data-accent="3"]{           /* violet */
  --accent:#a97dff;
  --accent-ink:#6d2bef;
  --accent-deep:#7c4be0;
  --accent-soft:#f0e9ff;
  --accent-glow:rgba(169,125,255,.5);
}