/* assets/tokens.css: the Crew v2 tokens (docs/design/rebrand/v5/README.md §3).
   The one place a colour, radius, type size or spacing is written as a
   literal. styles.css and every page read these names; feature CSS never
   writes a hex. Loaded before styles.css on every page. */
:root {
  /* Neutrals */
  --ink: #1d2233;          /* text, primary buttons, live surfaces, selected nav */
  --ink-2: #262c40;        /* rows and cards on Ink */
  --ink-3: #353b52;        /* tracks and secondary buttons on Ink */
  --ink-deep: #12151f;     /* iPad overlay backdrop, orb core */
  --white: #ffffff;        /* cards, avatar ring, secondary buttons */
  --cream: #f6f3ea;        /* rows inside cards, avatar face disc, Home stage */
  --sand: #ebe6d8;         /* empty, locked, disabled */
  --muted: #4a4f60;        /* secondary text on White/Cream */
  --muted-2: #5a5e6d;      /* placeholder text */
  --on-ink-muted: #c9c6d6; /* secondary text on Ink */

  /* Colour */
  --lime: #d4ec4f;   --lime-tint: #e6f39a;
  --sun: #ffd23f;    --sun-tint: #ffe27a;
  --pink: #f7a8c4;   --pink-tint: #fbc4d8;
  --blue: #6ec3ff;   --blue-tint: #93d3ff;
  --purple: #b39cf5; --purple-tint: #c8b8fa;
  --mint: #5fe0b0;
  --orange: #ff7a45;
  --danger: #b42e46;
  --veil: rgba(29, 34, 51, .45);
  --orb-ring: conic-gradient(#d4ec4f, #6ec3ff, #b39cf5, #f7a8c4, #ff7a45, #5fe0b0, #d4ec4f);

  /* Team colours, everywhere: scorer, live courts, boards, live link. */
  --team-1: var(--lime);
  --team-2: var(--sun);

  /* Type */
  --font-display: "Bricolage Grotesque", "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-shout: 86px;        --fs-shout-hero: 112px;
  --fs-result: 280px;      --fs-scorer: 200px;
  --fs-card-title: 28px;   --fs-row-title: 20px;   --fs-stat: 32px;
  --fs-lead: 17px;         --fs-body: 15.5px;      --fs-nav: 15px;
  --fs-eyebrow: 11.5px;    --fs-brand: 28px;
  --lh-shout: .84; --ls-shout: -.05em; --ls-score: -.065em; --ls-title: -.03em; --ls-eyebrow: .08em;

  /* Radius */
  --r-page: 40px;   /* page card, drawer, map */
  --r-card: 30px;   /* inner card, quest card */
  --r-row: 22px;    /* stat tile, row */
  --r-row-s: 18px;  /* small row */
  --r-field: 14px;  /* field, chip, date tile */
  --r-tag: 10px;    /* status tag */
  --r-pill: 999px;  /* pills and buttons */

  /* Spacing */
  --bar-h: 96px; --gutter: 32px; --head-col: 440px; --col-gap: 32px;
  --card-gap: 18px; --card-pad: 28px; --row-gap: 6px; --dock-reserve: 104px;
  --m-status: 0px; --m-header: 56px; --m-capsule: 52px; --m-tabbar: 104px;

  /* Shadows: only the sticker lift. Cards have none. */
  --lift: drop-shadow(0 5px 0 rgba(29, 34, 51, .14));

  /* Section stage (set per section below). */
  --stage: var(--cream); --tint: var(--sand); --stage-on: var(--white);
}

@media (max-width: 767.98px) {
  :root {
    --fs-shout: 52px; --fs-shout-hero: 64px;
    --fs-result: 150px; --fs-scorer: 104px;
    --fs-card-title: 22px; --fs-row-title: 18px; --fs-stat: 20px;
    --fs-lead: 14.5px; --fs-body: 14.5px; --fs-nav: 12.5px;
    --fs-eyebrow: 10.5px; --fs-brand: 24px;
    --r-page: 30px; --r-row: 18px;
    --gutter: 16px; --card-gap: 12px; --card-pad: 16px;
  }
}

/* One stage colour per section (rule 1). The router sets data-section on
   <html> (assets/shell.js); the whole window, bar included, is the stage. */
:root[data-section="home"],
:root[data-section="signin"] { --stage: var(--cream); --tint: var(--sand); --stage-on: var(--white); }
:root[data-section="courts"] { --stage: var(--lime); --tint: var(--lime-tint); --stage-on: var(--lime); }
:root[data-section="play"]   { --stage: var(--sun); --tint: var(--sun-tint); --stage-on: var(--sun); }
:root[data-section="group"]  { --stage: var(--pink); --tint: var(--pink-tint); --stage-on: var(--pink); }
:root[data-section="me"]     { --stage: var(--blue); --tint: var(--blue-tint); --stage-on: var(--blue); }
:root[data-section="join"]   { --stage: var(--purple); --tint: var(--purple-tint); --stage-on: var(--purple); }