/* RallyPro design tokens — single source of truth.
   Linked by every page; do not redeclare these blocks inline.
   Colour values are the canonical court-green + lime design pack;
   the scale tokens (motion / radius / space / type) were promoted
   from the dominant freehand values so adoption is visually neutral. */
:root {
  /* dark theme — court-green + lime, per the RallyPro design pack */
  --bg-grad-from: #143638;
  --bg-grad-to: #0F2A2E;
  --surface: rgba(26, 61, 66, 0.55);
  --surface-solid: #1A3D42;
  /* Recessed surface for inputs / keycaps — slightly darker than the card in
     dark theme, faint cream in light theme. Always contrasts with --text. */
  --surface-2: #12302F;
  --surface-hover: rgba(244, 251, 232, 0.05);
  --surface-active: rgba(244, 251, 232, 0.08);
  --border: rgba(244, 251, 232, 0.08);
  --border-strong: rgba(244, 251, 232, 0.18);
  --text: #F4FBE8;
  --text-muted: rgba(244, 251, 232, 0.62);
  --text-faint: rgba(244, 251, 232, 0.55);
  --accent: #C7F277;
  --accent-bright: #D6F694;
  --accent-soft: rgba(199, 242, 119, 0.14);
  --accent-text: #0F2A2E;
  /* Accent-flavored TEXT/links. On dark, lime reads fine; the html.theme-light
     override below swaps to a deep court green that clears WCAG AA (4.5:1) on
     white — plain --accent/--accent-bright/--gold all FAIL contrast on light. */
  --accent-ink: #C7F277;
  --gold: #FFB23F;
  --gold-bright: #FFC061;
  /* Gold-flavored TEXT that stays legible in BOTH themes — bright gold on dark,
     dark amber on light (the light override below). --gold/--gold-bright are too
     light to use as text on a near-white surface (same trap as --accent). */
  --gold-ink: #FFC061;
  --gold-soft: rgba(255, 178, 63, 0.12);
  /* Partner-blue role colour as TEXT — sky on dark, deeper blue on light (AA on
     cream); -soft is the chip tint. Single source for new partner-text sites. */
  --role-partner: #6CBFF4;
  --role-partner-soft: rgba(108, 191, 244, 0.18);
  --danger: #FF7A5C;
  --danger-bright: #FF9676;
  --danger-soft: rgba(255, 122, 92, 0.12);
  --scrub: #F4FBE8;
  --dead: rgba(244, 251, 232, 0.06);

  /* ---- scale tokens (theme-agnostic) ---- */
  --dur-fast: 150ms;     /* hover / press / small state flips */
  --dur-base: 200ms;     /* color + border transitions */
  --dur-slow: 320ms;     /* expand / collapse / view changes */
  --dur-slower: 600ms;   /* deliberate, attention-drawing */
  --ease-standard: cubic-bezier(.2,.7,.3,1);  /* enter + move */
  --ease-exit: cubic-bezier(.4,0,1,1);        /* leave */
  --ease-spring: cubic-bezier(.34,1.4,.64,1); /* press / pop */

  /* v2 motion system (design-language refresh — stronger curves per the
     approved mockups; see emil-design-eng). The older dur and ease tokens
     above stay until every page has migrated onto these. */
  --e-out: cubic-bezier(0.22, 1, 0.36, 1);     /* enter / hover / reveal */
  --e-inout: cubic-bezier(0.77, 0, 0.175, 1);  /* on-screen movement */
  --e-press: cubic-bezier(0.34, 1.2, 0.64, 1); /* press / pop */
  --d-press: 140ms;
  --d-pop: 200ms;
  --d-reveal: 620ms;

  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 22px;
  --r-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 21px;
  --text-2xl: 24px;
}
html.theme-light {
  /* cream variant */
  --bg-grad-from: #F6F2E5;
  --bg-grad-to: #FFFFFF;
  --surface: rgba(255, 255, 255, 0.85);
  --surface-solid: #FFFFFF;
  --surface-2: #EEF1E6;
  --surface-hover: rgba(15, 42, 46, 0.04);
  --surface-active: rgba(15, 42, 46, 0.06);
  --border: rgba(15, 42, 46, 0.10);
  --border-strong: rgba(15, 42, 46, 0.20);
  --text: #0F2A2E;
  --text-muted: rgba(15, 42, 46, 0.65);
  --text-faint: rgba(15, 42, 46, 0.58);
  --accent: #C7F277;
  --accent-bright: #B3E862;
  --accent-soft: rgba(199, 242, 119, 0.22);
  --accent-text: #0F2A2E;
  --accent-ink: #1F6B33;   /* deep court green — 6.54:1 on white (AA); see :root note */
  --role-partner: #2A6CA8; /* deeper blue — ≥4.5:1 on cream/white (AA); sky fails on light */
  --role-partner-soft: rgba(42, 108, 168, 0.12); /* deeper, lower-alpha tint for cream (parity w/ gold/danger-soft) */
  --gold: #FF7A2C;
  --gold-bright: #FF9650;
  --gold-ink: #B45309;     /* dark amber — ~4.8:1 on the gold-soft-over-white banner (AA) */
  --gold-soft: rgba(255, 122, 44, 0.12);
  --danger: #FF5B2C;
  --danger-bright: #FF7A50;
  --danger-soft: rgba(255, 91, 44, 0.10);
  --scrub: #0F2A2E;
  --dead: rgba(15, 42, 46, 0.08);
}

/* ---- shared base rules (apply on every page) ---- */

/* Visible keyboard focus everywhere — most interactive elements
   (custom card widgets, icon buttons, nav links) had no focus ring at
   all, so keyboard users couldn't see where they were. Mouse clicks
   don't trigger :focus-visible, so this is keyboard-only. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* Honour the OS "reduce motion" setting on every page — previously
   only index.html and landing.html did. Collapses transitions and
   animations to near-instant and stops decorative infinite loops. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}