/* ============================================================================
 * tokens.css — the palette contract.
 *
 * This is the ONE file you rewrite when you retheme the app. Everything else
 * consumes these names and never hard-codes a colour, a radius or a shadow.
 *
 * WANDER'S PALETTE — "a clear morning sky, seen from a window seat."
 *
 * White, blue, and very light. The page is a near-white with a whisper of
 * blue in it; cards are pure white so the photo on them is the most
 * saturated thing on screen; the single brand-weight colour is the sky blue
 * of the Save button. The whole point of the deck is the photograph, and a
 * loud UI would compete with it — so the chrome stays pale and lets the
 * picture be the colour.
 *
 * Two buttons carry the app's only decision, and their colours are part of
 * the spec rather than a style choice: SAVE IS BLUE, SKIP IS WHITE. Do not
 * swap them, do not make skip red — skipping is not a rejection, it is just
 * "not today", and a red button would make people hesitate over a choice
 * that is meant to be effortless.
 * ========================================================================= */

:root {
  /* --- surfaces: page, raised card, sunken well ------------------------ */
  --bg:            #f3f8ff;   /* the status bar tints to this — keep it in sync with theme-color */
  --bg-raised:     #ffffff;
  --bg-sunken:     #e6f0fb;

  /* --- sky: the two tints that make gradients, card backs and the icon.
   * --sky is the pale one you can put text on; --sky-deep is the one you
   * can put WHITE text on. Nothing else in the app is allowed to be a third
   * blue — a third blue is how a two-colour identity turns into five. ---- */
  --sky:           #cfe6ff;
  --sky-deep:      #7dbcff;

  /* --- ink: body copy, secondary, barely-there. Navy, never black, so text
   * on the pale blue page reads as the same family. -------------------- */
  --ink:           #102540;
  --ink-soft:      #47617e;
  --ink-faint:     #7d90a6;

  /* --- accent: the ink you press. This is the Save button. ------------ */
  --accent:          #2f80ed;
  --accent-soft:     #5b9bf2;
  --accent-contrast: #ffffff;

  /* --- structure ------------------------------------------------------- */
  --line:          #dbe7f5;
  --line-strong:   #b9cfe8;

  /* --- semantic only. Never brand. ------------------------------------- */
  --good:          #1f7a4d;
  --good-bg:       #e3f3ea;
  --bad:           #b03a3a;
  --bad-bg:        #f9e7e7;

  /* --- shape ----------------------------------------------------------- */
  --radius:        18px;
  --radius-sm:     12px;
  --radius-pill:   999px;

  /* Shadows are tinted with the ink navy rather than black, so a card sits
   * on the blue page the way a shadow would on a sunlit surface. */
  --shadow-sm: 0 1px 2px rgb(16 37 64 / 0.06);
  --shadow-md: 0 2px 6px rgb(16 37 64 / 0.07), 0 10px 24px -12px rgb(16 37 64 / 0.18);
  --shadow-lg: 0 8px 20px rgb(16 37 64 / 0.12), 0 24px 48px -16px rgb(16 37 64 / 0.28);

  /* --- type --------------------------------------------------------------
   * System stack. The photo is the identity; a webfont would be a third-party
   * request in exchange for nothing the picture is not already doing. */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: ui-rounded, "SF Pro Rounded", var(--font-body);
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* --- safe areas ---------------------------------------------------------
   * Behind variables so every anchored element derives from ONE number, and
   * so you can fake a notched device in a desktop browser by overriding
   * these two in devtools. --safe-b is the iOS home indicator, NOT a URL bar. */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* --- chrome heights, so content can clear them ------------------------ */
  --topbar-h: 56px;
  --tabbar-h: 58px;
}