/* ============================================================================
 * FantasyStakes — UI/UX Rev 4.2 · design tokens
 * Sprint 7 Package 1 — Shared UI Shell + Global Components
 *
 * The palette token NAMES and VALUES are fixed by the locked POR (Rev4.1 §1.3,
 * carried forward unchanged into Rev4.2). They are reproduced here verbatim so
 * the application and the canonical prototype cannot drift apart.
 *
 * Tokens the POR does not name — spacing, radius, type scale, border weights —
 * are namespaced `--fs-*` so they can never be confused with a POR palette
 * token. They encode the geometry the locked look already uses; they do not
 * introduce new visual decisions.
 * ========================================================================== */

:root {
  /* ── POR palette · Rev4.1 §1.3 — names and values are load-bearing ──────── */
  --bg:     #0c0a07;   /* app background */
  --mast:   #12100c;   /* masthead, bottom navigation */
  --card:   #161309;   /* cards */
  --tile:   #1b1811;   /* strip cells, inset tiles */

  --line:   #221d11;   /* dividers */
  --line2:  #2a2415;   /* borders */
  --edge:   #3a3220;   /* emphasised borders, anchor cells */

  --bone:   #e8e2d2;   /* primary text */
  --gold:   #c9a24a;   /* accent, active state, anchor values */
  --goldbg: #2a2210;   /* gold tint fill */

  --green:  #97c459;   /* positive money — border/rule weight */
  --green2: #c0dd97;   /* positive money — text */
  --greenbg:#1e2413;   /* green tint fill */
  --red:    #f09595;   /* negative money */
  --amber:  #ef9f27;   /* pending, unresolved */

  --g1:     #8a8573;   /* secondary text */
  --g2:     #5a5546;   /* tertiary text */

  /* ── Type ───────────────────────────────────────────────────────────────── */
  --fs-font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Money is tabular-figure monospace everywhere — POR §1.3. */
  --fs-font-money: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-size-eyebrow:    9px;    /* section eyebrows, strip labels */
  --fs-size-micro:      10px;   /* helper and context text */
  --fs-size-fine:       11px;   /* secondary copy, taglines */
  --fs-size-body:       12px;   /* rows, card body */
  --fs-size-title:      15px;   /* tab titles, sheet titles */
  --fs-size-value:      18px;   /* four-cell strip value — Rev4.2 stronger */
  --fs-size-word:       23px;   /* masthead lockup */

  --fs-weight-regular:  400;
  --fs-weight-medium:   500;
  --fs-weight-strong:   600;   /* Rev4.2 strip values */
  --fs-weight-heavy:    700;

  --fs-track-eyebrow:  .14em;   /* eyebrow / section-heading letter-spacing */
  --fs-track-lockup:   .22em;   /* masthead tagline letter-spacing */

  /* ── Rev 4.3 readability scale (WP3B · POR §5) ──────────────────────────────
   *
   * A SECOND, ADDITIVE SCALE — the `--fs-size-*` tokens above are untouched.
   *
   * WHY ADDITIVE RATHER THAN A REWRITE OF THE SCALE ABOVE. Every Rev 4.2 card
   * in the tree is sized from those tokens and its geometry is measured by the
   * Sprint 7 and Sprint 8 layout suites at 375x667, where several surfaces sit
   * within a few pixels of clipping. Raising `--fs-size-body` from 12px to
   * 16px would restyle every one of them at once, and WP3B §9 is explicit that
   * this package applies the foundation to the shell and its own surfaces and
   * does NOT comprehensively restyle the WP3C-owned cards. So the new scale is
   * defined here, in full, and applied where WP3B owns the surface. WP3C
   * migrates the rest onto it deliberately, card by card, with the geometry
   * suites watching.
   *
   * The values are the POR's targets, taken at the readable end of each range.
   */
  --fs-r43-page-title:     23px;   /* §5.1 main page title      22–24 */
  --fs-r43-section:        19px;   /* §5.1 section heading      18–20 */
  --fs-r43-card:           16px;   /* §5.1 card primary text    16–17 */
  --fs-r43-card-secondary: 14px;   /* §5.1 card secondary text  14–15 */
  --fs-r43-meta:           13px;   /* §5.1 metadata / tertiary  min 12–13 */
  --fs-r43-strip-label:    13px;   /* §5.1 summary-strip labels 13–14 */
  --fs-r43-strip-value:    23px;   /* §5.1 summary-strip values 22–24 */
  --fs-r43-nav-label:      11px;   /* §5.1 bottom-nav labels    11–12 */

  /* §5.1 and §31 — the practical minimum for anything tappable. */
  --fs-r43-touch:          44px;

  /* §5.2 — secondary text gets MORE contrast, not less.
   *
   * `--g1` (#8a8573) sits at roughly 4.4:1 on `--bg`, and `--g2` (#5a5546) at
   * about 2.3:1 — under WCAG AA for body text, which is exactly the "extremely
   * low-contrast text" §5 names. These two lift secondary and tertiary text to
   * about 7.1:1 and 4.6:1 while staying inside the established warm-grey
   * family, so the palette is not redesigned (WP3B §9) — it is made readable.
   */
  --fs-r43-secondary:      #b8b2a0;
  --fs-r43-tertiary:       #948e7c;

  /* ── Spacing ────────────────────────────────────────────────────────────── */
  --fs-space-1:  2px;
  --fs-space-2:  5px;
  --fs-space-3:  7px;
  --fs-space-4:  10px;
  --fs-space-5:  12px;
  --fs-space-6:  16px;

  /* Horizontal inset applied to every full-bleed rail, strip and scroll body. */
  --fs-gutter:   12px;

  /* ── Radius ─────────────────────────────────────────────────────────────── */
  --fs-radius-cell:  8px;
  --fs-radius-tile:  9px;
  --fs-radius-card:  12px;
  --fs-radius-sheet: 16px;

  /* ── Borders ────────────────────────────────────────────────────────────── */
  --fs-border-hair:   1px solid var(--line);
  --fs-border:        1px solid var(--line2);
  --fs-border-edge:   1px solid var(--edge);

  /* ── Frame ──────────────────────────────────────────────────────────────── */
  --fs-app-max-width: 480px;

  /* Safe-area insets, resolved once. A device without insets reports 0px, so
   * these are safe to add unconditionally. */
  --fs-safe-top:    env(safe-area-inset-top, 0px);
  --fs-safe-bottom: env(safe-area-inset-bottom, 0px);
  /* WP3E - THE SIDES MATTER IN LANDSCAPE. A notched phone rotated puts its
   * cutout on a side edge, and nothing was reserving it: the tab bar and the
   * panel both ran underneath. Both resolve to 0px wherever there is no inset,
   * so desktop and un-notched portrait pay nothing for them. */
  --fs-safe-left:   env(safe-area-inset-left, 0px);
  --fs-safe-right:  env(safe-area-inset-right, 0px);
}