/* RALLY design tokens — "Forest" direction (light mode only for now).
 * Source of truth: design_handoff_rally_ladder/README.md §Design Tokens.
 * All color/type/spacing/shape values in the app reference these variables —
 * never hardcode a hex or px value elsewhere (CLAUDE.md UI rules). Dark mode is
 * not yet designed; when it is, add a [data-theme="dark"] block here only.
 */
:root {
  /* ---- Color: surfaces & ink ---- */
  --bg: #F5F6F0;
  --ink: #1E2A20;            /* primary text */
  --surface: #FFFFFF;        /* card surface */
  --surface-tint: #EEF3EA;   /* YOU / accepted / active state */
  /* Behind the app column on desktop only (see "Desktop" in app.css). A shade
     deeper than --bg so the column reads as the app rather than as content
     stranded in the middle of a very wide page. */
  --canvas: #E8EAE1;

  /* ---- Color: accent ---- */
  --accent: #3A5233;         /* forest green — primary action */
  --accent-2: #5C7A4F;       /* sage — in-progress / tinted emphasis */
  /* Tappable TEXT on --bg: the create screen's settings list (2026-09-13).
   * --accent read as plain text, so nothing looked tappable; --accent-2 is
   * 4.4:1, just under the 4.5 bar that darkened --muted. This is 5.5:1 —
   * George chose it side by side with both ("B"). */
  --accent-tap: #4E6B42;

  /* ---- Color: muted text (decreasing prominence) ----
   *
   * --muted WAS #9AA294, which measures 2.6:1 against white — well under the
   * 4.5:1 that counts as readable, and it is the colour of EVERY caption in the
   * app: "Said no earlier", "Away until 3 Sep", the venue line on a game card,
   * and the club's place. George, 2026-08-29, on "Islesboro, Maine": "it's in a
   * light grey, I think it should be easier to read."
   *
   * Darkened to 4.9:1. This is the same argument as the 18px floor above and
   * was the same oversight — the type got big enough to read and the colour
   * stayed too faint to. A phone app for a club, read outdoors, often by people
   * who are not going to fish out reading glasses.
   *
   * The three below it are decoration (dashes, empty-slot glyphs, chevrons) and
   * are deliberately left alone: they are never the only carrier of a fact. */
  --muted: #697563;
  /* The nav redesign's two darker greens (2026-09-18): the next-game card, and
     the filled buttons that sit on the redesigned screens. */
  --green-deep: #24391F;
  --green-primary: #2C4A2B;
  --on-green: #CBDCC5;       /* secondary text on the dark card */
  --on-green-2: #A9C1A2;     /* its overline */
  --hairline: rgba(30, 42, 32, .11);
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --muted-2: #AEB3A4;
  --muted-3: #B7BDAE;
  --muted-4: #C3C7BA;

  /* ---- Color: borders ---- */
  --border: #E9EBE0;         /* default card border */
  --border-tint: #DCE4D4;    /* tinted-surface border (YOU / accepted) */
  --border-dashed: #D6DCCB;  /* pending / outgoing (used with dashed style) */

  /* ---- Typography ----
   *
   * THE FLOOR IS 18px (2026-08-11). Nothing anyone reads is smaller than this,
   * anywhere. It replaces a 12px floor that had crept down to 11px in one
   * place, and it is a deliberate accessibility decision, not a style
   * preference: this is a phone app for a club, read outdoors, often by people
   * who are not going to fish out reading glasses to find out who else is
   * playing.
   *
   * The five tokens below the floor therefore all resolve to 18px. The NAMES
   * are kept (--fs-12 … --fs-16) because they are referenced ~70 times across
   * the app and a rename is pure churn — but do not read them as pixel values
   * any more. Hierarchy at the small end is carried by weight and colour, which
   * is where it was already doing most of the work.
   *
   * Adding a 6th "but this bit is just a caption" size below 18px is how the
   * floor gets lost again. Don't. */
  --font: system-ui, -apple-system, sans-serif;
  --fs-hero: 64px;   /* hero rank number, weight 200 */
  --fs-title: 26px;  /* screen titles, weight 700 */
  --fs-pos: 24px;    /* position number, weight 600 */
  --fs-22: 22px;
  --fs-20: 20px;
  --fs-name: 18px;   /* player name, weight 600 — also the floor */
  --fs-16: 18px;     /* was 16 — section titles / rows, weight 600-700 */
  --fs-15: 18px;     /* was 15 */
  --fs-14: 18px;     /* was 14 — meta text */
  --fs-13: 18px;     /* was 13 */
  --fs-12: 18px;     /* was 12 — form labels, meta */

  --w-hero: 200;
  --w-bold: 700;
  --w-semi: 600;
  --w-reg: 400;      /* the quiet half of a name; see .nm-first in app.css */

  /* ---- Shape ---- */
  --r-card: 13px;    /* card radius 12-14 */
  --r-pill: 20px;    /* pill radius, fully rounded */
  --shadow-lift: 0 2px 12px rgba(58, 82, 51, 0.10); /* challengeable/lifted only */

  /* ---- Spacing ---- */
  --pad-screen: 15px;   /* screen side padding — one knob for the whole app */
  --pad-card: 16px;     /* card internal padding 15-17 */
  --gap-card: 11px;     /* gap between stacked cards 10-12 */

  /* ---- iPhone safe areas ----
   * env() everywhere, not just on the native shell. These used to be flat
   * 54px/30px fallbacks with `.ios-native` overriding them, which meant every
   * WEB visitor — desktop and mobile browser alike — got 54px of dead space
   * above the nav bar to clear a notch that isn't there (mobile Safari draws
   * its own chrome above the page, so the top inset is genuinely 0 there).
   * The real inset is the right number on every surface, so ask for it on
   * every surface. Keep the fallbacks at 0: an env() the browser doesn't know
   * resolves to the fallback, and "no inset" is correct for anything that old.
   * Screens that need breathing room add their own padding on top of this. */

  /* THE ONLY SOURCE OF SAFE-AREA TRUTH. capacitor.config.json sets
     ios.contentInset = "never" deliberately: with "always" (the scaffold
     default) WKWebView insets its own content for the safe areas AND these
     env() values apply on top, so every inset is paid twice — the nav bar sat
     ~59pt too low and the tab bar floated the same distance off the bottom.
     If either half changes, the other has to change with it. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Kept for clarity: the native shell reads exactly the same values. Do not
 * reintroduce a hardcoded fallback here — see the note above. */
.ios-native {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}