/* =========================================================== Lingo Reign
   The court's colours, lifted from android/app/.../theme/Theme.kt and Shapes.kt so
   the site and the game are drawn with the same hand.

   This file exists because they stopped being. The palette used to be copied
   into all three pages, which meant a change in the app had to be made in
   four places and was in practice made in none of them — the site was still
   candlelit after the game had been rebuilt. One file, linked everywhere, is
   what stops that happening a third time.

   Committed dark: the game has no light mode, and a parchment-white support
   page beside a midnight-purple game looked like two different products.

   The rule that makes this read as a cartoon rather than merely a dark theme
   is the same one the app follows: every shape is a solid fill with a darker
   outline, and anything pressable has a darker ledge beneath it. Nothing is a
   translucent wash over whatever happens to be behind it. That is why the
   surfaces below are opaque and come as a ladder rather than as one colour at
   three alphas.
   ====================================================================== */
:root {
  color-scheme: dark;

  /* ---------------------------------------------------------- surfaces
     Darkest to lightest. A panel sits on the ground, a card on the panel,
     a chip on the card. */
  --royal-950: #17102F;  /* the ground, and the inside of a meter */
  --royal-900: #20164A;  /* recessed wells, list backings */
  --royal-800: #2E2063;  /* the standard panel */
  --royal-700: #412E88;  /* raised: cards */
  --royal-600: #5A41AE;  /* brightest: chips that must pop off a card */

  /* The outline ink. Darker than every surface above, which is what makes an
     outline read as a drawn line rather than as a lighter edge. The candlelit
     site had no equivalent — it used white at six percent instead, which is
     under 1.2:1 on any of these and effectively invisible. */
  --ink-900: #0B0619;

  /* ------------------------------------------------------------ accents */
  --gold:       #FFB020;
  --gold-light: #FFE08A;
  --gold-deep:  #C97A00;  /* the ledge under a gold button */

  /* -------------------------------------------------------------- text */
  --ink:       #F7F5FF;
  --ink-dim:   #CFC6EA;
  /* Clears AA up to --royal-700 (4.87:1) but NOT on --royal-600 (3.42:1);
     secondary text on that surface uses --ink-dim. Mirrors the same rule on
     Palette.inkFaint, pinned there by PaletteContrastTest. */
  --ink-faint: #B4A8DE;

  /* ---------------------------------------------------------- semantic
     Verdict colours only. A faction meter that happens to be green uses its
     own --stat-people, so "the People are thriving" and "you answered
     correctly" never say the same thing in the same green. */
  --good:      #58CC02;
  --good-deep: #46A302;
  --bad:       #FF4B4B;
  --bad-deep:  #D33131;

  /* ------------------------------------------------------------- stats
     Army is rose, not the pure red of --bad: the candlelit set used one
     value for both, so a full army meter and a wrong answer were drawn in
     the same colour. */
  --stat-faith:  #8B9CFF;
  --stat-people: #2FD4A0;
  --stat-army:   #FF6584;
  --stat-gold:   #FFC93C;

  --stat-faith-deep:  #5566E0;
  --stat-people-deep: #12A87C;
  --stat-army-deep:   #E03B63;
  --stat-gold-deep:   #E09B00;

  /* ------------------------------------------------------------- shape
     Deliberately coarse. Cartoon interfaces have few sizes of everything;
     the candlelit site had one --radius doing every job, and the app it was
     copied from had fifteen. Six, named for what they wrap. */
  --corner-tag:    10px;
  --corner-chip:   14px;
  --corner-well:   16px;
  --corner-button: 20px;
  --corner-card:   28px;
  --corner-panel:  28px;

  /* Three outline weights and no more. --outline-hair exists only so the
     scale has a step below standard; nothing currently uses it. */
  --outline-hair:     1px;
  --outline-standard: 2px;
  --outline-bold:     3px;

  /* How far a pressable object stands above its own shadow. This is the
     whole trick behind the button: the face is drawn this far above a darker
     copy of itself, and pressing translates it down onto that copy. */
  --ledge: 4px;

  /* -------------------------------------------------------------- type
     The rounded face the app moved to. On Android the app asks the system
     for `sans-serif-rounded`; the web has no such universal family, so the
     stack below tries a self-hosted face first, then Apple's rounded UI
     font, then plain system sans.

     A serif is the strongest single signal that a game is solemn, and solemn
     is what this whole refactor moved away from — so even the fallback here
     is a sans, never the old Palatino/Georgia stack. */
  --display: "Baloo 2", ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN",
             system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Kept for the few places a soft drop is still wanted under a floating
     panel. Objects get outlines and ledges now, not glows. */
  --shadow: 0 18px 46px rgba(0, 0, 0, .5);
}

/* ---------------------------------------------------- the rounded face
   Commented out until the file actually exists.

   Left live, this @font-face 404s on every single page load — verified in the
   browser, four requests, four failures. The page still renders correctly
   because the stack in --display falls through to the next family, but
   shipping a guaranteed 404 to every visitor to save one edit later is a bad
   trade, and "Baloo 2" simply being unmatched in the stack costs nothing.

   To turn it on:
     1. put an OFL-licensed rounded woff2 (Baloo 2, Nunito or Quicksand —
        Latin subset, roughly 15–30KB) at website/fonts/
     2. match the family name here and in --display above
     3. uncomment this block

   `font-display: swap` renders immediately in the fallback and re-lays out
   when the file arrives, so there is no invisible-text flash.

@font-face {
  font-family: "Baloo 2";
  src: url("/fonts/baloo2-latin-700.woff2") format("woff2");
  font-weight: 700 800;
  font-style: normal;
  font-display: swap;
}
*/