/* GVTL theme variables. Fallback / app default: teal "Default". Apply by setting data-theme on . */ :root, [data-theme="default"] { /* Backgrounds — GVTL default branding (teal) */ --theme-bg-gradient: linear-gradient(160deg, #E0F2F1 0%, #E8F5F4 40%, #F1FFFE 100%); --theme-header-bg: linear-gradient(135deg, #004D40 0%, #00695C 50%, #00796B 100%); --theme-header-border: #4DB6AC; --theme-header-shadow: rgba(0, 77, 64, 0.4); --theme-primary: #004D40; --theme-primary-mid: #00695C; --theme-primary-light: #00796B; --theme-primary-lighter: #00897B; --theme-surface: #E0F2F1; --theme-surface-mid: #E8F5F4; --theme-surface-strong: #B2DFDB; --theme-card-bg: #ffffff; --theme-input-bg: #ffffff; --theme-controls-bg: rgba(255, 255, 255, 0.95); --theme-border: #80CBC4; --theme-border-light: #B2DFDB; --theme-accent: #26A69A; --theme-accent-hover: #4DB6AC; --theme-btn-primary-start: #00897B; --theme-btn-primary-end: #00695C; --theme-btn-primary-hover-start: #00796B; --theme-btn-primary-hover-end: #004D40; --theme-shadow: rgba(0, 105, 92, 0.15); --theme-shadow-strong: rgba(0, 105, 92, 0.35); --theme-shadow-focus: rgba(38, 166, 154, 0.25); --theme-shadow-table: rgba(0, 105, 92, 0.12); --theme-text-on-primary: white; --theme-header-text: white; --theme-body-text: #333; --theme-dashboard-heading: #00695C; --theme-dashboard-detail: #00796B; --theme-border-subtle: rgba(0, 77, 64, 0.2); /* Admin panel button shades (banner) */ --theme-admin-btn-dark: #00695C; --theme-admin-btn-mid: #00796B; --theme-admin-btn-mid-light: #00897B; --theme-admin-btn-light: #26A69A; --theme-admin-btn-primary: #00897B; --theme-admin-btn-pale: #B2DFDB; --theme-admin-btn-accent: #4DB6AC; /* CRUD page buttons (Search, Clear, secondary actions) */ --theme-btn-secondary: #4DB6AC; --theme-btn-secondary-hover: #26A69A; /* Server metrics charts */ --theme-chart-text: #333; --theme-chart-grid: rgba(0, 0, 0, 0.08); --theme-chart-dataset: #00897B; --theme-chart-dataset-fill: rgba(0, 137, 123, 0.12); --theme-chart-gauge-empty: #e8e8e8; } /* Wimbledon — grass court greens */ [data-theme="wimbledon"] { --theme-bg-gradient: linear-gradient(160deg, #E8F5E9 0%, #F1F8E9 40%, #FFFDE7 100%); --theme-header-bg: linear-gradient(135deg, #1B5E20 0%, #2E7D32 50%, #388E3C 100%); --theme-header-border: #CDDC39; --theme-header-shadow: rgba(27, 94, 32, 0.4); --theme-primary: #1B5E20; --theme-primary-mid: #2E7D32; --theme-primary-light: #388E3C; --theme-primary-lighter: #43A047; --theme-surface: #E8F5E9; --theme-surface-mid: #F1F8E9; --theme-surface-strong: #C8E6C9; --theme-card-bg: #ffffff; --theme-input-bg: #ffffff; --theme-controls-bg: rgba(255, 255, 255, 0.95); --theme-border: #C8E6C9; --theme-border-light: #A5D6A7; --theme-accent: #CDDC39; --theme-accent-hover: #D4E157; --theme-btn-primary-start: #43A047; --theme-btn-primary-end: #2E7D32; --theme-btn-primary-hover-start: #388E3C; --theme-btn-primary-hover-end: #1B5E20; --theme-shadow: rgba(46, 125, 50, 0.15); --theme-shadow-strong: rgba(46, 125, 50, 0.35); --theme-shadow-focus: rgba(67, 160, 71, 0.2); --theme-shadow-table: rgba(46, 125, 50, 0.12); --theme-text-on-primary: white; --theme-header-text: white; --theme-body-text: #333; --theme-dashboard-heading: #558B2F; --theme-dashboard-detail: #689F38; --theme-border-subtle: rgba(30, 94, 32, 0.2); --theme-admin-btn-dark: #2E7D32; --theme-admin-btn-mid: #388E3C; --theme-admin-btn-mid-light: #66BB6A; --theme-admin-btn-light: #81C784; --theme-admin-btn-primary: #43A047; --theme-admin-btn-pale: #A5D6A7; --theme-admin-btn-accent: #CDDC39; --theme-btn-secondary: #81C784; --theme-btn-secondary-hover: #66BB6A; --theme-chart-text: #333; --theme-chart-grid: rgba(0, 0, 0, 0.08); --theme-chart-dataset: #1976d2; --theme-chart-dataset-fill: rgba(25, 118, 210, 0.1); --theme-chart-gauge-empty: #e8e8e8; } [data-theme="usopen"] { --theme-bg-gradient: linear-gradient(160deg, #E3F2FD 0%, #E8EAF6 40%, #FCE4EC 100%); --theme-header-bg: linear-gradient(135deg, #0D47A1 0%, #1565C0 50%, #1976D2 100%); --theme-header-border: #42A5F5; --theme-header-shadow: rgba(13, 71, 161, 0.4); --theme-primary: #0D47A1; --theme-primary-mid: #1565C0; --theme-primary-light: #1976D2; --theme-primary-lighter: #1E88E5; --theme-surface: #E3F2FD; --theme-surface-mid: #E8EAF6; --theme-surface-strong: #BBDEFB; --theme-card-bg: #ffffff; --theme-input-bg: #ffffff; --theme-controls-bg: rgba(255, 255, 255, 0.95); --theme-border: #90CAF9; --theme-border-light: #BBDEFB; --theme-accent: #42A5F5; --theme-accent-hover: #64B5F6; --theme-btn-primary-start: #1E88E5; --theme-btn-primary-end: #1565C0; --theme-btn-primary-hover-start: #1976D2; --theme-btn-primary-hover-end: #0D47A1; --theme-shadow: rgba(21, 101, 192, 0.15); --theme-shadow-strong: rgba(21, 101, 192, 0.35); --theme-shadow-focus: rgba(30, 136, 229, 0.2); --theme-shadow-table: rgba(21, 101, 192, 0.12); --theme-text-on-primary: white; --theme-header-text: white; --theme-body-text: #333; --theme-dashboard-heading: #1565C0; --theme-dashboard-detail: #1976D2; --theme-border-subtle: rgba(13, 71, 161, 0.2); /* Admin panel button shades (banner) */ --theme-admin-btn-dark: #1565C0; --theme-admin-btn-mid: #1976D2; --theme-admin-btn-mid-light: #1E88E5; --theme-admin-btn-light: #42A5F5; --theme-admin-btn-primary: #1E88E5; --theme-admin-btn-pale: #BBDEFB; --theme-admin-btn-accent: #42A5F5; /* CRUD page buttons (Search, Clear, secondary actions) */ --theme-btn-secondary: #64B5F6; --theme-btn-secondary-hover: #42A5F5; /* Server metrics charts */ --theme-chart-text: #333; --theme-chart-grid: rgba(0, 0, 0, 0.08); --theme-chart-dataset: #1976d2; --theme-chart-dataset-fill: rgba(25, 118, 210, 0.1); --theme-chart-gauge-empty: #e8e8e8; } /* French Open — clay court / Roland-Garros: terre battue reds and cream */ [data-theme="frenchopen"] { --theme-bg-gradient: linear-gradient(160deg, #FFF8F0 0%, #FFEFE0 40%, #FFE4D0 100%); --theme-header-bg: linear-gradient(135deg, #8B2500 0%, #A52A2A 50%, #B22222 100%); --theme-header-border: #D2691E; --theme-header-shadow: rgba(139, 37, 0, 0.4); --theme-primary: #8B2500; --theme-primary-mid: #A52A2A; --theme-primary-light: #B22222; --theme-primary-lighter: #CD5C5C; --theme-surface: #FFF8F0; --theme-surface-mid: #FFEFE0; --theme-surface-strong: #F5DEB3; --theme-card-bg: #ffffff; --theme-input-bg: #ffffff; --theme-controls-bg: rgba(255, 255, 255, 0.95); --theme-border: #DEB887; --theme-border-light: #F5DEB3; --theme-accent: #D2691E; --theme-accent-hover: #CD853F; --theme-btn-primary-start: #B22222; --theme-btn-primary-end: #8B2500; --theme-btn-primary-hover-start: #A52A2A; --theme-btn-primary-hover-end: #6B1A00; --theme-shadow: rgba(165, 42, 42, 0.15); --theme-shadow-strong: rgba(165, 42, 42, 0.35); --theme-shadow-focus: rgba(205, 92, 92, 0.2); --theme-shadow-table: rgba(165, 42, 42, 0.12); --theme-text-on-primary: white; --theme-header-text: white; --theme-body-text: #333; --theme-dashboard-heading: #8B2500; --theme-dashboard-detail: #A52A2A; --theme-border-subtle: rgba(139, 37, 0, 0.2); /* Admin panel button shades (banner) */ --theme-admin-btn-dark: #8B2500; --theme-admin-btn-mid: #A52A2A; --theme-admin-btn-mid-light: #B22222; --theme-admin-btn-light: #CD5C5C; --theme-admin-btn-primary: #B22222; --theme-admin-btn-pale: #DEB887; --theme-admin-btn-accent: #D2691E; /* CRUD page buttons (Search, Clear, secondary actions) */ --theme-btn-secondary: #CD853F; --theme-btn-secondary-hover: #D2691E; /* Server metrics charts */ --theme-chart-text: #333; --theme-chart-grid: rgba(0, 0, 0, 0.08); --theme-chart-dataset: #A52A2A; --theme-chart-dataset-fill: rgba(165, 42, 42, 0.1); --theme-chart-gauge-empty: #e8e8e8; } /* Australian Open — Melbourne hard court: electric blue and ice/summer blue */ [data-theme="australianopen"] { --theme-bg-gradient: linear-gradient(160deg, #E1F5FE 0%, #E8F4FC 40%, #F0F8FF 100%); --theme-header-bg: linear-gradient(135deg, #006BB3 0%, #0082CA 50%, #00A0E0 100%); --theme-header-border: #4FC3F7; --theme-header-shadow: rgba(0, 107, 179, 0.4); --theme-primary: #006BB3; --theme-primary-mid: #0082CA; --theme-primary-light: #00A0E0; --theme-primary-lighter: #29B6F6; --theme-surface: #E1F5FE; --theme-surface-mid: #E8F4FC; --theme-surface-strong: #B3E5FC; --theme-card-bg: #ffffff; --theme-input-bg: #ffffff; --theme-controls-bg: rgba(255, 255, 255, 0.95); --theme-border: #81D4FA; --theme-border-light: #B3E5FC; --theme-accent: #4FC3F7; --theme-accent-hover: #81D4FA; --theme-btn-primary-start: #00A0E0; --theme-btn-primary-end: #006BB3; --theme-btn-primary-hover-start: #0082CA; --theme-btn-primary-hover-end: #005A8C; --theme-shadow: rgba(0, 130, 202, 0.15); --theme-shadow-strong: rgba(0, 130, 202, 0.35); --theme-shadow-focus: rgba(41, 182, 246, 0.2); --theme-shadow-table: rgba(0, 130, 202, 0.12); --theme-text-on-primary: white; --theme-header-text: white; --theme-body-text: #333; --theme-dashboard-heading: #006BB3; --theme-dashboard-detail: #0082CA; --theme-border-subtle: rgba(0, 107, 179, 0.2); /* Admin panel button shades (banner) */ --theme-admin-btn-dark: #006BB3; --theme-admin-btn-mid: #0082CA; --theme-admin-btn-mid-light: #00A0E0; --theme-admin-btn-light: #29B6F6; --theme-admin-btn-primary: #00A0E0; --theme-admin-btn-pale: #B3E5FC; --theme-admin-btn-accent: #4FC3F7; /* CRUD page buttons (Search, Clear, secondary actions) */ --theme-btn-secondary: #81D4FA; --theme-btn-secondary-hover: #4FC3F7; /* Server metrics charts */ --theme-chart-text: #333; --theme-chart-grid: rgba(0, 0, 0, 0.08); --theme-chart-dataset: #0082CA; --theme-chart-dataset-fill: rgba(0, 130, 202, 0.1); --theme-chart-gauge-empty: #e8e8e8; } /* Fallout — Pip-Boy CRT: dark terminal background with neon green phosphor */ [data-theme="fallout"] { --theme-bg-gradient: radial-gradient(circle at top, #020908 0%, #020403 40%, #000000 100%); --theme-header-bg: linear-gradient(135deg, #041b12 0%, #022510 45%, #010d08 100%); --theme-header-border: #7CFC00; --theme-header-shadow: rgba(0, 255, 128, 0.28); --theme-primary: #7CFC00; --theme-primary-mid: #4ae877; --theme-primary-light: #9eff57; --theme-primary-lighter: #c6ff8f; --theme-surface: #020806; --theme-surface-mid: #020f0a; --theme-surface-strong: #041812; --theme-card-bg: #020807; --theme-input-bg: #020a07; --theme-controls-bg: rgba(2, 12, 8, 0.98); --theme-border: #094625; --theme-border-light: #116b3a; --theme-accent: #9eff57; --theme-accent-hover: #c6ff8f; --theme-btn-primary-start: #074e29; --theme-btn-primary-end: #042414; --theme-btn-primary-hover-start: #0a6b3a; --theme-btn-primary-hover-end: #053020; --theme-shadow: rgba(0, 0, 0, 0.7); --theme-shadow-strong: rgba(0, 0, 0, 0.9); --theme-shadow-focus: rgba(124, 252, 0, 0.35); --theme-shadow-table: rgba(0, 0, 0, 0.75); --theme-text-on-primary: #9eff57; --theme-header-text: #c6ff8f; --theme-body-text: #c6ff8f; --theme-dashboard-heading: #9eff57; --theme-dashboard-detail: #6be86b; --theme-border-subtle: rgba(124, 252, 0, 0.25); /* Admin panel button shades (banner) */ --theme-admin-btn-dark: #041b12; --theme-admin-btn-mid: #06301c; --theme-admin-btn-mid-light: #094126; --theme-admin-btn-light: #0c5330; --theme-admin-btn-primary: #7CFC00; --theme-admin-btn-pale: #094626; --theme-admin-btn-accent: #9eff57; /* CRUD page buttons (Search, Clear, secondary actions) */ --theme-btn-secondary: #06301c; --theme-btn-secondary-hover: #094126; /* Server metrics charts */ --theme-chart-text: #c6ff8f; --theme-chart-grid: rgba(158, 255, 87, 0.2); --theme-chart-dataset: #9eff57; --theme-chart-dataset-fill: rgba(158, 255, 87, 0.12); --theme-chart-gauge-empty: #04120d; } /* Dark theme: "Under the lights" — stadium-night feel with warm amber accents */ [data-theme="under-the-lights"] { --theme-bg-gradient: linear-gradient(160deg, #1a1a1a 0%, #252525 40%, #2d2d2d 100%); --theme-header-bg: linear-gradient(135deg, #2d2d2d 0%, #383838 50%, #424242 100%); --theme-header-border: #D4A84B; --theme-header-shadow: rgba(0, 0, 0, 0.4); --theme-primary: #E8D5A3; --theme-primary-mid: #D4A84B; --theme-primary-light: #C99C3D; --theme-primary-lighter: #D4A84B; --theme-surface: #2d2d2d; --theme-surface-mid: #383838; --theme-surface-strong: #454545; --theme-card-bg: #2d2d2d; --theme-input-bg: #383838; --theme-controls-bg: rgba(45, 45, 45, 0.98); --theme-border: #505050; --theme-border-light: #606060; --theme-accent: #D4A84B; --theme-accent-hover: #E8C068; --theme-btn-primary-start: #C99C3D; --theme-btn-primary-end: #A67C2E; --theme-btn-primary-hover-start: #D4A84B; --theme-btn-primary-hover-end: #8B6914; --theme-shadow: rgba(0, 0, 0, 0.3); --theme-shadow-strong: rgba(0, 0, 0, 0.5); --theme-shadow-focus: rgba(212, 168, 75, 0.3); --theme-shadow-table: rgba(0, 0, 0, 0.2); --theme-text-on-primary: #1a1a1a; --theme-header-text: #e5e5e5; --theme-body-text: #e5e5e5; --theme-dashboard-heading: #D4A84B; --theme-dashboard-detail: #C99C3D; --theme-border-subtle: rgba(212, 168, 75, 0.25); /* Admin panel button shades (banner) */ --theme-admin-btn-dark: #5c4a2a; --theme-admin-btn-mid: #6B5529; --theme-admin-btn-mid-light: #8B6914; --theme-admin-btn-light: #A67C2E; --theme-admin-btn-primary: #C99C3D; --theme-admin-btn-pale: #8B6914; --theme-admin-btn-accent: #D4A84B; /* CRUD page buttons (Search, Clear, secondary actions) */ --theme-btn-secondary: #6B5529; --theme-btn-secondary-hover: #8B6914; /* Server metrics charts */ --theme-chart-text: #e5e5e5; --theme-chart-grid: rgba(255, 255, 255, 0.12); --theme-chart-dataset: #D4A84B; --theme-chart-dataset-fill: rgba(212, 168, 75, 0.15); --theme-chart-gauge-empty: #454545; } /* High contrast — maximum contrast for accessibility: black/white with strong borders */ [data-theme="high-contrast"] { --theme-bg-gradient: #ffffff; --theme-header-bg: #000000; --theme-header-border: #000000; --theme-header-shadow: rgba(0, 0, 0, 0.5); --theme-primary: #000000; --theme-primary-mid: #000000; --theme-primary-light: #1a1a1a; --theme-primary-lighter: #333333; --theme-surface: #ffffff; --theme-surface-mid: #f5f5f5; --theme-surface-strong: #e0e0e0; --theme-card-bg: #ffffff; --theme-input-bg: #ffffff; --theme-controls-bg: #ffffff; --theme-border: #000000; --theme-border-light: #000000; --theme-accent: #000000; --theme-accent-hover: #333333; --theme-btn-primary-start: #000000; --theme-btn-primary-end: #000000; --theme-btn-primary-hover-start: #333333; --theme-btn-primary-hover-end: #000000; --theme-shadow: rgba(0, 0, 0, 0.25); --theme-shadow-strong: rgba(0, 0, 0, 0.5); --theme-shadow-focus: rgba(0, 0, 0, 0.6); --theme-shadow-table: rgba(0, 0, 0, 0.2); --theme-text-on-primary: #ffffff; --theme-header-text: #ffffff; --theme-body-text: #000000; --theme-dashboard-heading: #000000; --theme-dashboard-detail: #000000; --theme-border-subtle: #000000; /* Admin panel button shades (banner) */ --theme-admin-btn-dark: #000000; --theme-admin-btn-mid: #1a1a1a; --theme-admin-btn-mid-light: #333333; --theme-admin-btn-light: #4d4d4d; --theme-admin-btn-primary: #000000; --theme-admin-btn-pale: #666666; --theme-admin-btn-accent: #000000; /* CRUD page buttons (Search, Clear, secondary actions) */ --theme-btn-secondary: #333333; --theme-btn-secondary-hover: #000000; /* Server metrics charts */ --theme-chart-text: #000000; --theme-chart-grid: rgba(0, 0, 0, 0.2); --theme-chart-dataset: #000000; --theme-chart-dataset-fill: rgba(0, 0, 0, 0.08); --theme-chart-gauge-empty: #e0e0e0; } /* Fallout theme tweaks for admin UI components */ [data-theme="fallout"] .btn-admin.btn-admin--primary { /* Primary league management buttons: use dark text for contrast on neon background */ color: #020807; } [data-theme="fallout"] .btn-admin.btn-admin--primary:not(.active):hover { /* On hover, darken background slightly and switch to light text */ filter: brightness(0.8); color: #c6ff8f; } [data-theme="fallout"] .btn-help, [data-theme="fallout"] .btn-help:hover { /* Help buttons: dark text on bright green */ color: #020807; } [data-theme="fallout"] .admin-content-modal-tab-bar { /* Tab bar background: slightly lighter to separate from neon header */ background: linear-gradient(135deg, #041812 0%, #06301c 50%, #041812 100%); } [data-theme="fallout"] .admin-content-tab { /* Tabs: bright text on darker tab surface for readability */ background: #020f0a; color: #c6ff8f; border-color: #094625; } [data-theme="fallout"] .admin-content-tab.active { /* Active tab: neon border and strong contrast text */ background: #06301c; color: #c6ff8f; border-color: #9eff57; } [data-theme="fallout"] .data-table thead { /* Grid header rows: dark text against bright green header gradient */ color: #020807; } /* Under the lights: dark admin buttons need light text (--theme-text-on-primary is dark for amber surfaces) */ [data-theme="under-the-lights"] .btn-admin.btn-admin--dark, [data-theme="under-the-lights"] .btn-admin.btn-admin--mid, [data-theme="under-the-lights"] .btn-admin.btn-admin--mid-light { color: #e5e5e5; } /* High contrast: force light text on all dark buttons (they use --theme-primary for color elsewhere) */ [data-theme="high-contrast"] .btn-admin.btn-admin--light, [data-theme="high-contrast"] .btn-admin.btn-admin--pale, [data-theme="high-contrast"] .btn-admin.btn-admin--accent { color: #ffffff; } [data-theme="high-contrast"] .btn-secondary, [data-theme="high-contrast"] .btn-secondary:hover { color: #ffffff; } [data-theme="high-contrast"] .btn-help, [data-theme="high-contrast"] .btn-help:hover { color: #ffffff; } /* High contrast: notification/dashboard tile content black */ [data-theme="high-contrast"] .dashboard-card__value, [data-theme="high-contrast"] .dashboard-card--warning .dashboard-card__value, [data-theme="high-contrast"] .dashboard-card--info .dashboard-card__value, [data-theme="high-contrast"] .dashboard-card--success .dashboard-card__value, [data-theme="high-contrast"] .dashboard-card__label, [data-theme="high-contrast"] .dashboard-card__detail, [data-theme="high-contrast"] .dashboard-card__arrow { color: #000000; }