/* =========================================================================
   tokens.css — Single source of truth for design tokens (colors, typography).
   Palette inspired by the player page: a warm orange / cream basketball look.
   All layouts (home, team, tournament, game, coach, entity, player) read from
   the same tokens so the site feels coherent.

   Older tokens (--player-*, --main-color, --third-color, --accent, --ink, ...)
   are kept as aliases pointing to the canonical ones so legacy selectors keep
   working without a deep find-and-replace.
   ========================================================================= */

:root {
  /* Brand palette (canonical) */
  --color-primary: #FF5722;          /* warm orange — main accent */
  --color-primary-strong: #FF7043;   /* slightly softer orange — hover / focus */
  --color-soft: #ffefd5;             /* creamy peach — backgrounds & chips */
  --color-soft-translucent: rgba(255, 112, 67, 0.12);

  /* Surfaces */
  --surface: #ffffff;
  --surface-muted: #f7f4ee;          /* warm cream used by player details */
  --surface-sunken: #fafafa;
  --surface-overlay: rgba(15, 23, 42, 0.06);

  /* Ink / text */
  --ink: #1b1b1b;
  --ink-strong: #0f172a;
  --ink-soft: #5e6a75;
  --ink-muted: #6b7280;
  --ink-faint: #94a3b8;

  /* Lines / borders */
  --line: #e2e8f0;
  --line-soft: #eef2f7;
  --line-warm: rgba(255, 112, 67, 0.2);

  /* Status colors */
  --color-success: #16a34a;
  --color-success-soft: rgba(34, 197, 94, 0.12);
  --color-success-border: rgba(34, 197, 94, 0.35);
  --color-danger: #ef4444;
  --color-danger-soft: rgba(239, 68, 68, 0.14);
  --color-warning: #f59e0b;
  --color-info: #0ea5e9;

  /* Standings / form chips */
  --color-green-standings: #61ff7e66;
  --color-red-standings: #ff61616e;
  --color-orange-standings: #fffa6166;

  /* Header (dark bar) */
  --header-bg: #000;
  --header-text: #f2f2f2;
  --header-text-soft: #e0e0e0;
  --header-border: rgba(255, 255, 255, 0.08);

  /* Shadows */
  --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* Typography */
  --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Lora', 'Palatino', 'Book Antiqua', serif;

  /* ---------------------------------------------------------------------
     Legacy aliases — old class names still reference these. Keep them in
     sync with the canonical tokens above so a single value change ripples
     across the whole codebase.
     --------------------------------------------------------------------- */
  --main-color: var(--color-primary);
  --secondary-color: var(--color-primary-strong);
  --third-color: var(--color-soft);
  --fourth-color: var(--color-soft-translucent);
  --white: var(--surface);
  --black-color: #050505;
  --red: var(--color-danger);
  --green: var(--color-success);
  --red-standings: var(--color-red-standings);
  --green-standings: var(--color-green-standings);

  --player-main-color: var(--color-primary);
  --player-secondary-color: var(--color-primary-strong);
  --player-third-color: var(--color-soft);
  --player-fourth-color: var(--color-soft-translucent);
  --player-gray: #D0CCD0;
  --player-green: #61FF7E;
  --player-red: #ff6161;
  --player-green-standings: var(--color-green-standings);
  --player-red-standings: var(--color-red-standings);
  --player-white: #FBFCFF;

  --ink-strong-legacy: var(--ink-strong);
  --surface-soft: var(--surface-muted);
  --outline: var(--line);
  --accent: var(--color-primary);
  --accent-dark: var(--color-primary-strong);
}