/* Grand Final Tipping — design tokens. Import before app.css. */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500..800&family=Figtree:wght@400;500;600;700;800&display=swap");

:root {
  /* Teams (reserved: players can't pick these) */
  --lions: #7B1E3A;
  --lions-deep: #4E1025;
  --dockers: #3E1F7A;
  --dockers-deep: #2A1356;

  /* Neutrals */
  --ink: #1B1726;
  --ink-2: #2A2537;
  --muted: #5F5A6B;
  --muted-on-ink: #BDB6CC;
  --ground: #F5F2EC;
  --card: #FFFFFF;
  --line: #E2DDD3;
  --line-strong: #D8D2C6;
  --tint-purple: #EFEAF7;

  /* Outcomes (always pair with a ✓ / ✗ icon) */
  --correct: #1E7A46;
  --correct-tint: #E6F4EC;
  --wrong: #B3261E;
  --wrong-tint: #FBE9E7;
  --unsure: #E9A21B;           /* ink text on it, never white */
  --live: #3DDC84;

  /* Default accent; a player's own colour overrides this on their phone */
  --accent: #0F8B8D;
  --accent-deep: #0A6163;

  /* Medals for suggestion ranks / podium */
  --gold: #F2C94C;
  --silver: #D5D8DE;
  --bronze: #E3A77A;

  /* Type */
  --font-display: "Bricolage Grotesque", Georgia, serif;
  --font-body: Figtree, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-hero: 52px;     /* takeover headline */
  --fs-score: 64px;    /* player score */
  --fs-h1: 34px;
  --fs-h2: 28px;
  --fs-q: 30px;        /* question text */
  --fs-body: 16px;
  --fs-small: 13px;

  /* Shape */
  --r-card: 28px;
  --r-tile: 20px;
  --r-btn: 18px;
  --r-pill: 999px;
  --tap: 44px;         /* minimum touch target */
  --btn-h: 56px;       /* primary button height */

  /* Depth */
  --shadow-card: 0 12px 32px rgba(27, 23, 38, 0.08);
  --shadow-sheet: 0 -16px 40px rgba(27, 23, 38, 0.2);
  --shadow-press: 0 8px 0 rgba(27, 23, 38, 0.18);   /* chunky "game button" drop */

  /* Motion */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --t-fast: 160ms;
  --t-move: 600ms;     /* ladder row reorder */
}

/* Player preset colours (12). Maroon/purple intentionally absent. */
:root {
  --p-teal: #0F8B8D;  --p-orange: #E0662B;  --p-blue: #2F6FDE;   --p-pink: #D1497B;
  --p-green: #4E8F2A; --p-gold: #C98A0B;    --p-sky: #2A9FD6;    --p-navy: #1F3A8A;
  --p-lime: #7FA82E;  --p-coral: #E8594A;   --p-choc: #8A5A2B;   --p-charcoal: #3F4654;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-move: 0ms; }
}