/* The game's own theme, for everything served from gopausegame.com.
 *
 * Colours are copied from PauseChallenge/DesignSystem/Tokens/ColorToken.swift
 * and the type is the game's: Lilita One for display, Fredoka for everything
 * else (PauseChallenge/Resources/Fonts, registered in Info.plist). A visitor
 * who sees the store listing, the landing page and the privacy policy should
 * not be able to tell they are looking at three different things.
 *
 * The second block maps the legal pages' older variable names onto these
 * tokens, so those pages keep their own layout rules and only change colour.
 */

/* The font link lives in the page head, not here: an @import inside a
   stylesheet is only discovered after that stylesheet has been fetched and
   parsed, which paints the page once in a fallback face and again in the
   game's. The head can start both downloads at once. */

:root {
  /* Surfaces */
  --navy-deepest: #02102b;
  --navy-deep: #031a40;
  --navy: #06275e;
  --navy-top: #0d2952;
  --sky-top: #2d6a99;
  --sky-mid: #5ca8c7;

  /* Frame and accents */
  --gold: #fab81f;
  --gold-light: #ffd66d;
  --gold-deep: #b87308;
  --star: #ffc52f;
  --cyan: #19c5e8;
  --violet: #8b55d9;
  --coral: #ff5c62;
  --success: #82d928;
  /* The target outline. The one colour that may not drift: the app draws the
     shape a player is judged against in exactly this lime. */
  --lime: #a3e635;

  /* Type */
  --cream: #fbfadb;
  --cream-gold: #f4e8a0;
  --ink-on-gold: #2a1a00;

  --font-display: "Lilita One", "Space Grotesk", Impact, sans-serif;
  --font-body: Fredoka, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  color-scheme: dark;
}

/* Legacy names used by privacy.html, terms.html, support.html and
   delete-account.html. Kept so those pages need no rewrite. */
:root {
  --bg: var(--navy-deep);
  --card: rgba(6, 39, 94, 0.55);
  --ink: var(--cream);
  --muted: rgba(244, 232, 160, 0.72);
  --line: rgba(244, 232, 160, 0.2);
  --brand: var(--gold-light);
  --brand-2: var(--cyan);
  --soft: rgba(45, 106, 153, 0.28);
  --warn: rgba(250, 184, 31, 0.14);
  --warn-ink: var(--gold-light);
}