/*
 * WonderQuest design tokens.
 *
 * Read off the approved mockup: a tropical Caribbean adventure. Turquoise
 * water, coral and sunset orange, sunny yellow, lush green, and purple kept
 * deliberately for the competitive features so that "this is a contest" reads
 * as a colour before it reads as a word.
 *
 * Two rules this file exists to enforce:
 *   1. No component ever writes a raw colour. If a value is not here, it is
 *      not in the palette.
 *   2. Every text/background pairing below clears WCAG AA at the size it is
 *      used. Children read this app on a phone in bright Caribbean sunlight,
 *      which is the worst viewing condition there is - contrast is not a
 *      checkbox here, it is whether the app is usable on deck at noon.
 */

:root {
  /* --- Brand ------------------------------------------------------------ */
  /* "Wonder" blue and "Quest" orange, straight from the logo. */
  --brand-blue: #1a6fd4;
  --brand-blue-deep: #0f4f9e;
  --brand-blue-light: #4a9dea;
  --brand-orange: #f97316;
  --brand-orange-deep: #e35d0a;
  --brand-orange-light: #fb9a4b;

  /* --- Tropical palette ------------------------------------------------- */
  --ocean: #22b8cf;           /* turquoise water */
  --ocean-deep: #0d8ba3;
  --ocean-light: #7fdce8;
  --ocean-mist: #e4f7fb;

  --coral: #ff6b4a;
  --coral-deep: #e04b2a;
  --coral-mist: #ffeae5;

  --sun: #fdc830;             /* stars, points, highlights */
  --sun-deep: #e0a800;
  --sun-mist: #fff6d9;

  --palm: #22a06b;            /* lush green */
  --palm-deep: #16794f;
  --palm-mist: #e3f7ee;

  /* Purple is reserved for competition: Family Battle, rankings, versus. */
  --versus: #8b5cf6;
  --versus-deep: #6d3fe0;
  --versus-mist: #f0eaff;

  /* --- Surfaces --------------------------------------------------------- */
  --surface: #ffffff;         /* the bright white cards */
  --surface-sunk: #f4f9fd;    /* inset fields, quote boxes */
  --surface-sand: #fdf6e9;    /* warm page background */
  --surface-sky: #eaf6fd;     /* cool page background */
  --surface-parchment: #fdf6e3; /* the scripture modal */

  /* --- Ink -------------------------------------------------------------- */
  /* Deep navy rather than black: black on a bright tropical card is harsh. */
  --ink: #16324f;
  --ink-soft: #40617f;
  --ink-muted: #7793ab;
  --ink-on-colour: #ffffff;

  /* --- Lines and shadows ------------------------------------------------ */
  --line: #dce8f2;
  --line-strong: #b9d2e5;

  /* Soft, warm and low - the mockup's cards lift off the page, they do not
     float above it. */
  --lift-sm: 0 1px 2px rgba(22, 50, 79, .06), 0 2px 6px rgba(22, 50, 79, .06);
  --lift: 0 2px 4px rgba(22, 50, 79, .06), 0 8px 20px rgba(22, 50, 79, .10);
  --lift-lg: 0 4px 8px rgba(22, 50, 79, .08), 0 16px 40px rgba(22, 50, 79, .16);

  /* --- Gradients -------------------------------------------------------- */
  /* The header sky, and one per action tile. */
  --sky-gradient: linear-gradient(170deg, #5cc5f2 0%, #2a9fe0 55%, #1a7fc4 100%);
  --tile-reflection: linear-gradient(145deg, #ffa03d 0%, #f97316 100%);
  --tile-games: linear-gradient(145deg, #4aa8ea 0%, #1a6fd4 100%);
  --tile-battle: linear-gradient(145deg, #a78bfa 0%, #7c3aed 100%);
  --tile-board: linear-gradient(145deg, #3ed0dd 0%, #0d9bb5 100%);
  --tile-hunt: linear-gradient(145deg, #ffb057 0%, #f2762b 100%);
  --tile-truefalse: linear-gradient(145deg, #b794ff 0%, #8b5cf6 100%);
  --tile-memory: linear-gradient(145deg, #ff8a6b 0%, #ec4f38 100%);

  /* --- Shape ------------------------------------------------------------ */
  /* Generously round, like the mockup. Big soft cards read as friendly, and
     a 7-year-old aims at them more accurately than at square ones. */
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* --- Space ------------------------------------------------------------ */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;

  /* --- Type ------------------------------------------------------------- */
  /* A rounded system stack. Nothing to download, nothing to cache offline,
     and it already looks like a friendly mobile game on every target device. */
  --font: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, -apple-system,
          "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  /* Nothing below 15px anywhere in the app. The brief says no tiny text and
     half the players are children. */
  --t-xs: 13px;   /* badges and counters ONLY, never prose */
  --t-sm: 15px;
  --t-base: 17px;
  --t-lg: 20px;
  --t-xl: 24px;
  --t-2xl: 30px;
  --t-3xl: 38px;

  --lh-tight: 1.2;
  --lh: 1.5;
  --lh-loose: 1.7;   /* reflection text and scripture, which get read slowly */

  --w-normal: 400;
  --w-medium: 600;
  --w-bold: 800;
  --w-black: 900;    /* headings and the logo */

  /* --- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);  /* card flips, rewards */
  --fast: 120ms;
  --normal: 240ms;
  --slow: 420ms;
  --celebrate: 900ms;

  /* --- Layout ----------------------------------------------------------- */
  --tabbar-h: 64px;
  --page-max: 560px;        /* phone-shaped even on a desktop monitor */
  --gutter: 16px;

  /* Safe areas, so the tab bar clears the home indicator on an iPhone. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/*
 * Reduced motion.
 *
 * Honoured properly rather than by killing every animation: feedback a player
 * needs (a card turning over, a right answer registering) still happens, it
 * just stops moving across the screen. An instant cut would make the games
 * harder to follow, which is not what someone asking for less motion wants.
 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --fast: 1ms;
    --normal: 1ms;
    --slow: 1ms;
    --celebrate: 1ms;
    --ease-bounce: linear;
  }
}

/*
 * Forced dark mode is NOT offered.
 *
 * The identity is a bright tropical daylight scene - white cards, turquoise
 * water, sunshine. A dark repaint of it would be a different app wearing the
 * same logo. The one real need behind dark mode on holiday is reading in a
 * dim cabin at night, and that is served by the device's own brightness and
 * by this app never showing a full-white page: every screen sits on a tinted
 * sand or sky background instead.
 */