/* Total Waterpolo: original site appearance. Site styling belongs in the WordPress theme; copies are for neutral/default variants. */
:root {

  /* ========== PALETTE - Raw Colors (theme override target) ========== */
  /* Base */
  --black: #000000;
  --white: #ffffff;
  --dark-text: #121212;

  /* Grays - consolidated (lightgray = #d3d3d3) */
  --gray: #808080;
  --light-gray: #d3d3d3;
  --lighter-gray: var(--light-gray);
  --text-gray: #333333;
  --text-black: var(--black);
  --border-muted: #dddddd;
  --border-disabled: #cccccc;
  --text-disabled: #999999;
  --surface-disabled: #f5f5f5;
  --surface-hover: #444444;

  /* Grays - dark theme surfaces (match-stat-light = gradient-start) */
  --match-stat-dark: var(--black);
  --match-stat-light: #2b2b2b;
  --match-gradient-start: var(--match-stat-light);
  --match-gradient-end: var(--black);
  --gray-overlay: var(--gray);

  /* Blues */
  --primary-blue: #20a2d8;
  --primary-blue-light: #22ade1;
  --bright-light-blue: #1de8f8;
  --highlight-blue: #46c6ff;
  --light-blue: #1bbfe6;
  --deep-blue: #1a264e;
  --team-blue: #175091;
  --dark-gradient-blue: #124e89;
  --water-blue: #0098ff;
  --bar-blue: #004aff;
  --border-blue-light: #77baff;
  /* light-gradient-blue = water-gradient-start */
  --light-gradient-blue: #67bfff;
  --water-gradient-start: var(--light-gradient-blue);
  --water-gradient-end: #0dabff;

  /* Greens */
  --bar-green: #14df00;
  --green-marker: #00ff45;
  --border-green: #00ff62;
  --chart-progress-green: #36ef8b;

  /* Reds / negative (level-3 = negative-bar) */
  --red-marker: #933e3e;
  --goalkeeper-red: #c73f3f;
  --red-highlight: #ff2424;
  --negative-chart-bg: #d32f2f;
  --negative-bar-color: #ff5252;
  --level-3-color: var(--negative-bar-color);

  /* Accents */
  --yellow-highlight: #fff500;
  --primary-orange: #f5a623; /* play-by-play live indicator, selected state */

  /* Level/Status 1 & 2 */
  --level-1-color: #8dc96a; /* Severity 1: Regular events */
  --level-2-color: #bc9e08; /* Severity 2: Exclusions */

  /* Transparent / rgba */
  --lighter-gray-40: rgba(211, 211, 211, 0.4);
  --lighter-gray-80: rgba(211, 211, 211, 0.8);
  --grey-marker: rgba(26, 38, 78, 0.6);
  --bg-gray-light: #f7f7f7;
  --dark-text-muted: rgba(18, 18, 18, 0.7);
  --white-60: rgba(255, 255, 255, 0.6);
  --white-50: rgba(255, 255, 255, 0.5);
  --white-40: rgba(255, 255, 255, 0.4);
  --white-70: rgba(255, 255, 255, 0.7);
  --shadow-light: rgba(0, 0, 0, 0.16);
  --shadow-medium: rgba(0, 0, 0, 0.24);
  --shadow-dark: rgba(0, 0, 0, 0.29);
  --shadow-text: rgba(33, 37, 41, 0.33);
  --shadow-inset: rgba(27, 38, 78, 0.5);

  /* ========== ROLES - Theme override target (group by visual function) ========== */
  /* Theme once per role; all components using that role inherit. See THEME-TOKENS.md */

  /* tw-headers - Headers everywhere (match head, group title, search section) */
  --tw-headers-bg: var(--tw-palette-black);
  --tw-headers-text: var(--tw-palette-white);
  --tw-headers-border: var(--tw-palette-white);

  /* tw-tabs - Tabs everywhere (match stats, startlist, pbp, player, competition) */
  --tw-tabs-bg: transparent;
  --tw-tabs-bg-active: var(--tw-palette-white);
  --tw-tabs-text: var(--tw-palette-white);
  --tw-tabs-text-active: var(--tw-palette-black);
  --tw-tabs-border: var(--tw-palette-white);

  /* tw-surfaces - Dark blocks (tables, rows, lists, match blocks) */
  --tw-surfaces-primary: var(--tw-palette-match-stat-dark);
  --tw-surfaces-secondary: var(--tw-palette-match-stat-light);
  --tw-surfaces-hover: var(--tw-palette-surface-hover);
  --tw-surfaces-gradient-start: var(--tw-palette-match-gradient-start);
  --tw-surfaces-gradient-end: var(--tw-palette-match-gradient-end);

  /* tw-text-on-dark - Text on dark surfaces */
  --tw-text-on-dark-primary: var(--tw-palette-white);
  --tw-text-on-dark-muted: var(--tw-palette-light-gray);
  --tw-text-on-dark-subtle: var(--tw-palette-white-60);
  --tw-text-on-dark-placeholder: var(--tw-palette-white-50);
  --tw-text-on-dark-meta: var(--tw-palette-white-70);

  /* tw-borders - Borders by context */
  --tw-border-on-dark: var(--tw-palette-white);
  --tw-border-on-light: var(--tw-palette-black);

  /* tw-cards - Light panels (expandables, cards view) */
  --tw-cards-bg: var(--tw-palette-white);
  --tw-cards-text: var(--tw-palette-dark-text);
  --tw-cards-text-muted: var(--tw-palette-dark-text-muted);
  --tw-cards-border: var(--tw-palette-border-green);
  --tw-cards-border-muted: var(--tw-palette-border-muted);

  /* tw-panels - Expandable sections (semi-transparent on dark) */
  --tw-panels-bg: var(--tw-palette-lighter-gray-80);
  --tw-panels-bg-muted: var(--tw-palette-lighter-gray-40);

  /* tw-text-on-light - Text on white/light backgrounds */
  --tw-text-on-light-primary: var(--tw-palette-text-gray);
  --tw-text-on-light-strong: var(--tw-palette-text-black);

  /* tw-inputs - Search, dropdowns */
  --tw-inputs-bg: var(--tw-palette-black);
  --tw-inputs-text: var(--tw-palette-white);
  --tw-inputs-border: var(--tw-palette-white);
  --tw-inputs-placeholder: var(--tw-palette-white-50);
  --tw-inputs-disabled-bg: var(--tw-palette-surface-disabled);
  --tw-inputs-disabled-text: var(--tw-palette-text-disabled);
  --tw-inputs-disabled-border: var(--tw-palette-border-disabled);

  /* tw-charts - Bar charts, progress bars */
  --tw-chart-positive: var(--tw-palette-bar-green);
  --tw-chart-negative: var(--tw-palette-negative-bar-color);
  --tw-chart-track: var(--tw-palette-bar-blue);
  --tw-chart-progress: var(--tw-palette-chart-progress-green);
  --tw-chart-negative-bg: var(--tw-palette-negative-chart-bg);

  /* tw-accents - Links, highlights, positive/negative */
  --tw-accent-link: var(--tw-palette-primary-blue);
  --tw-accent-highlight: var(--tw-palette-primary-orange);
  --tw-accent-positive: var(--tw-palette-bar-green);
  --tw-accent-negative: var(--tw-palette-negative-bar-color);

  /* tw-overlay - Loader, overlay */
  --tw-overlay-bg: var(--tw-palette-gray-overlay);
  --tw-overlay-content-bg: var(--tw-palette-white);
  --tw-overlay-text: var(--tw-palette-white);

  /* tw-shadow - Shadows */
  --tw-shadow-sm: var(--tw-palette-shadow-light);
  --tw-shadow-md: var(--tw-palette-shadow-medium);
  --tw-shadow-inset: var(--tw-palette-shadow-inset);
  --tw-shadow-text: var(--tw-palette-shadow-text);

  /* tw-level - Play-by-play severity */
  --tw-level-1: var(--tw-palette-level-1-color);
  --tw-level-2: var(--tw-palette-level-2-color);
  --tw-level-3: var(--tw-palette-level-3-color);

  /* tw-marker - Location viz shot markers */
  --tw-marker-positive: var(--tw-palette-bar-green);
  --tw-marker-negative: var(--tw-palette-red-marker);
  --tw-marker-neutral: var(--tw-palette-white);

  /* tw-water - Pool gradient */
  --tw-water-gradient-start: var(--tw-palette-water-gradient-start);
  --tw-water-gradient-end: var(--tw-palette-water-gradient-end);
  /* Typography, spacing and radii: preserve the original dimensions. */
  --tw-font-book: "Avenir Book", sans-serif;
  --tw-font-heavy: "Avenir Heavy", sans-serif;
  --tw-font-size-11px: 11px;
  --tw-font-size-14px: 14px;
  --tw-space-15px: 15px;
  --tw-font-size-16px: 16px;
  --tw-space-1_5px: 1.5px;
  --tw-font-size-28px: 28px;
  --tw-space-0px: 0px;
  --tw-space-0_5rem: 0.5rem;
  --tw-space-1rem: 1rem;
  --tw-space-12px: 12px;
  --tw-space-5px: 5px;
  --tw-space-3px: 3px;
  --tw-space-2px: 2px;
  --tw-radius-50percent: 50%;
  --tw-space-40px: 40px;
  --tw-space-negative-60px: -60px;
  --tw-space-10px: 10px;
  --tw-space-6px: 6px;
  --tw-font-size-13px: 13px;
  --tw-font-size-10px: 10px;
  --tw-space-4px: 4px;
  --tw-font-size-9px: 9px;
  --tw-font-size-8px: 8px;
  --tw-space-0_3px: 0.3px;
  --tw-radius-10px: 10px;
  --tw-font-size-36px: 36px;
  --tw-space-0_4px: 0.4px;
  --tw-space-8px: 8px;
  --tw-font-size-12px: 12px;
  --tw-font-size-24px: 24px;
  --tw-font-size-18px: 18px;
  --tw-space-0_5px: 0.5px;
  --tw-radius-17px: 17px;
  --tw-radius-5px: 5px;
  --tw-space-20px: 20px;
  --tw-font-size-20px: 20px;
  --tw-font-size-21px: 21px;
  --tw-space-0_55px: 0.55px;
  --tw-space-14px: 14px;
  --tw-space-16px: 16px;
  --tw-space-22px: 22px;
  --tw-font-size-15px: 15px;
  --tw-space-0_04em: 0.04em;
  --tw-radius-8px: 8px;
  --tw-space-0_01em: 0.01em;
  --tw-space-1px: 1px;
  --tw-font-size-22px: 22px;
  --tw-space-30px: 30px;
  --tw-space-0_8px: 0.8px;
  --tw-font-size-0_9em: 0.9em;
  --tw-space-negative-10px: -10px;
  --tw-space-negative-10percent: -10%;
  --tw-font-size-32px: 32px;
  --tw-space-0_4rem: 0.4rem;
  --tw-space-35px: 35px;
  --tw-space-7px: 7px;
  --tw-border-faint: rgba(255, 255, 255, 0.1);
  --tw-surface-faint: rgba(255, 255, 255, 0.08);
  --tw-surface-active: rgba(255, 255, 255, 0.12);
  --tw-surface-subtle: rgba(255, 255, 255, 0.06);
  --tw-stat-negative: #f87171;
  --tw-career-club-border: rgba(129, 140, 248, 0.85);
  --tw-career-national-border: rgba(192, 132, 252, 0.85);
  --tw-dropdown-icon-1: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  --tw-dropdown-icon-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23fff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");

  /* Namespaced palette aliases preserve Bootstrap/site overrides of legacy names. */
  --tw-palette-black: var(--black);
  --tw-palette-white: var(--white);
  --tw-palette-dark-text: var(--dark-text);
  --tw-palette-gray: var(--gray);
  --tw-palette-light-gray: var(--light-gray);
  --tw-palette-lighter-gray: var(--lighter-gray);
  --tw-palette-text-gray: var(--text-gray);
  --tw-palette-text-black: var(--text-black);
  --tw-palette-border-muted: var(--border-muted);
  --tw-palette-border-disabled: var(--border-disabled);
  --tw-palette-text-disabled: var(--text-disabled);
  --tw-palette-surface-disabled: var(--surface-disabled);
  --tw-palette-surface-hover: var(--surface-hover);
  --tw-palette-match-stat-dark: var(--match-stat-dark);
  --tw-palette-match-stat-light: var(--match-stat-light);
  --tw-palette-match-gradient-start: var(--match-gradient-start);
  --tw-palette-match-gradient-end: var(--match-gradient-end);
  --tw-palette-gray-overlay: var(--gray-overlay);
  --tw-palette-primary-blue: var(--primary-blue);
  --tw-palette-primary-blue-light: var(--primary-blue-light);
  --tw-palette-bright-light-blue: var(--bright-light-blue);
  --tw-palette-highlight-blue: var(--highlight-blue);
  --tw-palette-light-blue: var(--light-blue);
  --tw-palette-deep-blue: var(--deep-blue);
  --tw-palette-team-blue: var(--team-blue);
  --tw-palette-dark-gradient-blue: var(--dark-gradient-blue);
  --tw-palette-water-blue: var(--water-blue);
  --tw-palette-bar-blue: var(--bar-blue);
  --tw-palette-border-blue-light: var(--border-blue-light);
  --tw-palette-light-gradient-blue: var(--light-gradient-blue);
  --tw-palette-water-gradient-start: var(--water-gradient-start);
  --tw-palette-water-gradient-end: var(--water-gradient-end);
  --tw-palette-bar-green: var(--bar-green);
  --tw-palette-green-marker: var(--green-marker);
  --tw-palette-border-green: var(--border-green);
  --tw-palette-chart-progress-green: var(--chart-progress-green);
  --tw-palette-red-marker: var(--red-marker);
  --tw-palette-goalkeeper-red: var(--goalkeeper-red);
  --tw-palette-red-highlight: var(--red-highlight);
  --tw-palette-negative-chart-bg: var(--negative-chart-bg);
  --tw-palette-negative-bar-color: var(--negative-bar-color);
  --tw-palette-level-3-color: var(--level-3-color);
  --tw-palette-yellow-highlight: var(--yellow-highlight);
  --tw-palette-primary-orange: var(--primary-orange);
  --tw-palette-level-1-color: var(--level-1-color);
  --tw-palette-level-2-color: var(--level-2-color);
  --tw-palette-lighter-gray-40: var(--lighter-gray-40);
  --tw-palette-lighter-gray-80: var(--lighter-gray-80);
  --tw-palette-grey-marker: var(--grey-marker);
  --tw-palette-bg-gray-light: var(--bg-gray-light);
  --tw-palette-dark-text-muted: var(--dark-text-muted);
  --tw-palette-white-60: var(--white-60);
  --tw-palette-white-50: var(--white-50);
  --tw-palette-white-40: var(--white-40);
  --tw-palette-white-70: var(--white-70);
  --tw-palette-shadow-light: var(--shadow-light);
  --tw-palette-shadow-medium: var(--shadow-medium);
  --tw-palette-shadow-dark: var(--shadow-dark);
  --tw-palette-shadow-text: var(--shadow-text);
  --tw-palette-shadow-inset: var(--shadow-inset);
}