/* theme.css — Editorial Styling & Heritage Dark Theme for GL Archive */

/* 1. Base Typography & Font Features */
body {
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}
.tabular-nums {
    font-variant-numeric: tabular-nums;
}

/* 2. Light Theme Baseline (Daylight Gazette) */
html:not(.dark) {
    color-scheme: light;
    background-color: #fbfcfd;
}
html:not(.dark) body {
    background-color: #fbfcfd;
    color: #1e293b;
}

/* 3. Heritage Editorial Dark Theme (Not pitch black, not AI-neon — warm athletic charcoal) */
html.dark {
    color-scheme: dark;
    background-color: #131722;
}

html.dark body {
    background-color: #131722 !important;
    color: #cbd5e1 !important;
}

/* Primary Elevated Surfaces (Headers, Cards, Modals) */
html.dark header,
html.dark footer,
html.dark .bg-white,
html.dark .dark\:bg-slate-900,
html.dark .dark\:bg-slate-900\/60,
html.dark .dark\:bg-slate-900\/95 {
    background-color: #1c2230 !important;
}

/* Page Background & Base Tints */
html.dark .bg-slate-50,
html.dark .bg-\[\#fbfcfd\],
html.dark .dark\:bg-slate-950 {
    background-color: #131722 !important;
}

/* Secondary Wells / Stat Tiles / Filter Containers */
html.dark .bg-slate-100,
html.dark .dark\:bg-slate-800,
html.dark .dark\:bg-slate-800\/60,
html.dark .dark\:bg-slate-800\/80,
html.dark .dark\:bg-slate-800\/50 {
    background-color: #222a3b !important;
}

html.dark .bg-slate-200 {
    background-color: #2b354a !important;
}

/* Quiet, Editorial Borders (Soft charcoal-slate, no neon glare) */
html.dark .border-slate-100,
html.dark .border-slate-200,
html.dark .border-slate-200\/80,
html.dark .border-slate-200\/90,
html.dark .dark\:border-slate-800,
html.dark .dark\:border-slate-800\/60,
html.dark .dark\:border-slate-700 {
    border-color: #283347 !important;
}

html.dark .border-slate-300 {
    border-color: #37445c !important;
}

html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]),
html.dark .dark\:divide-slate-800 > :not([hidden]) ~ :not([hidden]) {
    border-color: #242e40 !important;
}

/* Typography Hierarchy (Refined, legible, warm contrast) */
html.dark .text-slate-950,
html.dark .text-slate-900,
html.dark .dark\:text-slate-100 {
    color: #f1f5f9 !important;
}

html.dark .text-slate-800,
html.dark .dark\:text-slate-200 {
    color: #e2e8f0 !important;
}

html.dark .text-slate-700,
html.dark .dark\:text-slate-300 {
    color: #cbd5e1 !important;
}

html.dark .text-slate-600,
html.dark .dark\:text-slate-400 {
    color: #94a3b8 !important;
}

html.dark .text-slate-500 {
    color: #78889e !important;
}

html.dark .text-slate-400 {
    color: #627289 !important;
}

/* British Racing Green / Forest Emerald Accents */
html.dark .text-emerald-600,
html.dark .text-emerald-700,
html.dark .text-emerald-800,
html.dark .text-emerald-900,
html.dark .dark\:text-emerald-400,
html.dark .dark\:text-emerald-300 {
    color: #34d399 !important;
}

html.dark .bg-emerald-50,
html.dark .dark\:bg-emerald-950,
html.dark .dark\:bg-emerald-950\/40,
html.dark .dark\:bg-emerald-950\/60 {
    background-color: rgba(6, 78, 59, 0.3) !important;
}

html.dark .border-emerald-200,
html.dark .border-emerald-300,
html.dark .dark\:border-emerald-700,
html.dark .dark\:border-emerald-800,
html.dark .dark\:border-emerald-800\/60 {
    border-color: rgba(52, 211, 153, 0.3) !important;
}

/* Warm Amber / Heritage Gold (Category Wins, Stalwarts, Podiums) */
html.dark .text-amber-500,
html.dark .text-amber-600,
html.dark .text-amber-700,
html.dark .text-amber-800,
html.dark .text-amber-900,
html.dark .dark\:text-amber-300,
html.dark .dark\:text-amber-400 {
    color: #fbbf24 !important;
}

html.dark .bg-amber-50,
html.dark .bg-amber-100,
html.dark .dark\:bg-amber-950,
html.dark .dark\:bg-amber-950\/40,
html.dark .dark\:bg-amber-950\/60 {
    background-color: rgba(146, 64, 14, 0.25) !important;
}

html.dark .border-amber-200,
html.dark .border-amber-300,
html.dark .dark\:border-amber-700,
html.dark .dark\:border-amber-800 {
    border-color: rgba(251, 191, 36, 0.3) !important;
}

/* Subtle Steel Blue for Secondary Context (Disambiguation/Namesakes - NOT electric cyan) */
html.dark .text-sky-600,
html.dark .text-sky-700,
html.dark .text-sky-800,
html.dark .dark\:text-sky-300,
html.dark .dark\:text-sky-400 {
    color: #7dd3fc !important;
}

html.dark .bg-sky-50,
html.dark .bg-sky-100,
html.dark .dark\:bg-sky-950\/40,
html.dark .dark\:bg-sky-900 {
    background-color: rgba(12, 74, 110, 0.3) !important;
}

html.dark .border-sky-200,
html.dark .dark\:border-sky-700,
html.dark .dark\:border-sky-800\/60 {
    border-color: rgba(125, 211, 252, 0.25) !important;
}

/* Muted Plum for Verified Name Changes (Wedding Ring Alert) */
html.dark .text-purple-600,
html.dark .text-purple-700,
html.dark .text-purple-800,
html.dark .dark\:text-purple-300,
html.dark .dark\:text-purple-400 {
    color: #d8b4fe !important;
}

html.dark .bg-purple-50,
html.dark .bg-purple-100,
html.dark .dark\:bg-purple-950\/40,
html.dark .dark\:bg-purple-900 {
    background-color: rgba(88, 28, 135, 0.25) !important;
}

html.dark .border-purple-200,
html.dark .dark\:border-purple-700,
html.dark .dark\:border-purple-800\/60 {
    border-color: rgba(216, 180, 254, 0.25) !important;
}

/* Hover States across elements */
html.dark .hover\:bg-slate-50:hover,
html.dark .hover\:bg-slate-50\/80:hover,
html.dark .hover\:bg-slate-100:hover,
html.dark .hover\:bg-slate-100\/50:hover,
html.dark .dark\:hover\:bg-slate-800\/50:hover {
    background-color: #252e42 !important;
}

html.dark .hover\:bg-slate-200:hover,
html.dark .dark\:hover\:bg-slate-700:hover {
    background-color: #2e3952 !important;
}

html.dark .hover\:text-slate-900:hover,
html.dark .hover\:text-slate-950:hover,
html.dark .dark\:hover\:text-white:hover {
    color: #ffffff !important;
}

html.dark .hover\:text-emerald-700:hover,
html.dark .hover\:text-emerald-800:hover,
html.dark .dark\:hover\:text-emerald-400:hover {
    color: #6ee7b7 !important;
}

/* Tables Styling */
html.dark table thead th {
    background-color: #19202e !important;
    color: #8b9bb2 !important;
    border-color: #283347 !important;
}

html.dark table tbody tr {
    border-color: #242e40 !important;
}

html.dark table tbody tr:hover {
    background-color: #222b3d !important;
}

/* Form Inputs, Dropdowns & Selects */
html.dark input[type="text"],
html.dark input[type="search"],
html.dark select {
    background-color: #181f2c !important;
    border-color: #2f3d54 !important;
    color: #f1f5f9 !important;
}

html.dark input::placeholder {
    color: #5b6c82 !important;
}

html.dark input:focus,
html.dark select:focus {
    border-color: #10b981 !important;
    background-color: #1c2434 !important;
    box-shadow: 0 0 0 1px #10b981 !important;
}

/* Search Palette Modal */
html.dark #search-palette-modal .bg-white {
    background-color: #1c2230 !important;
    border-color: #2f3d54 !important;
}

html.dark #search-palette-modal .border-slate-100,
html.dark #search-palette-modal .border-slate-200 {
    border-color: #283347 !important;
}

html.dark #search-palette-modal kbd {
    background-color: #222a3b !important;
    border-color: #2f3d54 !important;
    color: #8b9bb2 !important;
}

html.dark #search-palette-modal input {
    background-color: transparent !important;
    color: #f1f5f9 !important;
}

/* Navigation & Mobile Tray */
html.dark header.bg-white\/95,
html.dark header.dark\:bg-slate-900\/95 {
    background-color: rgba(28, 34, 48, 0.95) !important;
    border-color: #283347 !important;
}

html.dark #mobile-nav-tray {
    background-color: #1c2230 !important;
    border-color: #283347 !important;
}

/* Nav Brand Logo Badge */
html.dark .w-9.h-9.bg-slate-900,
html.dark .w-9.h-9.dark\:bg-emerald-950 {
    background-color: #064e3b !important;
    color: #ecfdf5 !important;
    border: 1px solid rgba(52, 211, 153, 0.35) !important;
}

/* Gender Controls & Active Switchers */
html.dark #btn-gender-m.bg-white, 
html.dark #btn-gender-f.bg-white {
    background-color: #252e42 !important;
    color: #f1f5f9 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

html.dark #btn-gender-m:not(.bg-white), 
html.dark #btn-gender-f:not(.bg-white) {
    color: #8b9bb2 !important;
}

/* Category Filter Pills */
html.dark .cat-pill.bg-slate-900,
html.dark .filter-tab.bg-slate-900 {
    background-color: #f1f5f9 !important;
    color: #131722 !important;
}

html.dark .cat-pill.bg-slate-100,
html.dark .filter-tab.bg-slate-100 {
    background-color: #222a3b !important;
    color: #8b9bb2 !important;
}

/* Theme Toggle Button */
#theme-toggle-btn {
    cursor: pointer;
}
html.dark #theme-toggle-btn {
    background-color: #222a3b !important;
    border-color: #2f3d54 !important;
}
html.dark #theme-toggle-btn:hover {
    background-color: #2a354b !important;
}

/* Seasons Directory & Fixture Cards */
html.dark .season-card {
    background-color: #1c2230 !important;
    border-color: #283347 !important;
}

html.dark .season-fixture-card {
    background-color: #151b27 !important;
    border-color: #263143 !important;
}

html.dark .season-fixture-card:hover {
    background-color: #1e2637 !important;
    border-color: rgba(52, 211, 153, 0.5) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
}

/* Ensure no translucent milky white backgrounds in dark mode */
html.dark [class*="bg-slate-50/"] {
    background-color: #151b27 !important;
}

/* Homepage Featured Showcase & Atmospheric Hero */
#latest-showcase-card {
    background: linear-gradient(135deg, #0d1a18 0%, #13171d 50%, #1a1012 100%) !important;
    border-color: rgba(144, 58, 61, 0.4) !important;
    box-shadow: 0 10px 30px -10px rgba(0, 73, 66, 0.25), 0 20px 25px -5px rgba(0, 0, 0, 0.45) !important;
}

html:not(.dark) #latest-showcase-card {
    background: linear-gradient(135deg, #0d1e1b 0%, #141b24 50%, #221215 100%) !important;
    color: #ffffff !important;
    border-color: rgba(144, 58, 61, 0.45) !important;
}

html:not(.dark) #latest-showcase-card .text-slate-400,
html:not(.dark) #latest-showcase-card .text-slate-300 {
    color: #cbd5e1 !important;
}

html:not(.dark) #latest-showcase-card .text-slate-200 {
    color: #f1f5f9 !important;
}

html:not(.dark) #latest-showcase-card .bg-slate-800\/60,
html:not(.dark) #latest-showcase-card .bg-slate-800\/70 {
    background-color: rgba(22, 30, 42, 0.75) !important;
    border-color: rgba(51, 65, 85, 0.8) !important;
}

/* Winner Card Accents using Gwent Colours */
.first-man-card {
    background: rgba(0, 73, 66, 0.22) !important;
    border-color: rgba(0, 73, 66, 0.6) !important;
}
.first-man-card:hover {
    border-color: #00685e !important;
    background: rgba(0, 73, 66, 0.35) !important;
    box-shadow: 0 4px 16px rgba(0, 73, 66, 0.3) !important;
}

.first-woman-card {
    background: rgba(144, 58, 61, 0.22) !important;
    border-color: rgba(144, 58, 61, 0.6) !important;
}
.first-woman-card:hover {
    border-color: #ab484c !important;
    background: rgba(144, 58, 61, 0.35) !important;
    box-shadow: 0 4px 16px rgba(144, 58, 61, 0.3) !important;
}

/* Hero Section Ambient Backdrop with Gwent Colours */
.hero-atmosphere {
    position: relative;
    background: radial-gradient(circle at 30% -10%, rgba(0, 73, 66, 0.10) 0%, transparent 55%),
                radial-gradient(circle at 70% -10%, rgba(144, 58, 61, 0.08) 0%, transparent 55%);
}

html.dark .hero-atmosphere {
    background: radial-gradient(circle at 30% -15%, rgba(0, 73, 66, 0.18) 0%, transparent 60%),
                radial-gradient(circle at 70% -15%, rgba(144, 58, 61, 0.14) 0%, transparent 60%);
}

/* Club Page Visual Identity & Theming */
#club-hero-header {
    background-color: #090e17;
    color: #ffffff;
}

#club-hero-header .text-slate-900,
#club-hero-header .text-slate-800 {
    color: #ffffff !important;
}

#club-hero-header .text-slate-500,
#club-hero-header .text-slate-400 {
    color: #94a3b8 !important;
}

.club-telemetry-card {
    background-color: rgba(15, 23, 42, 0.65) !important;
    border-color: rgba(51, 65, 85, 0.7) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.2s ease-in-out;
}

.club-telemetry-card:hover {
    border-color: var(--club-primary, #004942) !important;
    transform: translateY(-1px);
}

.club-active-tab {
    background-color: var(--club-primary, #004942) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}