/**
 * Handball Stats Pro — Editorial Theme
 * Palette: Cream #FAFAF7 · Graphite #111111 · Antique Gold #B8960C
 * Imported in every HTML via <link rel="stylesheet" href="/css/app-theme.css">
 */

/* ── Fonts ──────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

/* ── CSS Custom Properties ───────────────────────────────────────────── */
:root {
    --primary:         #B8960C;
    --primary-dark:    #8B6E0A;
    --primary-bright:  #D4AE16;
    --primary-dim:     rgba(184, 150, 12, 0.12);

    --bg:              #FAFAF7;
    --surface:         #FFFFFF;
    --surface-lighter: #F5F4EE;
    --border:          #E5E3DC;
    --border-visible:  #CCC8BE;

    --text-main:       #111111;
    --text-muted:      #555555;
    --text-subtle:     #999999;

    --success:         #16A34A;
    --danger:          #DC2626;
    --accent-blue:     #2563eb;

    --radius:          0.75rem;
    --transition-fast: 80ms;
}

/* ── Base ────────────────────────────────────────────────────────────── */
html, body {
    background-color: #FAFAF7;
    color: #111111;
}

/* ── Scrollbar ───────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.04); }
::-webkit-scrollbar-thumb { background: #CCC8BE; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #9B9790; }

/* ── Material Symbols ────────────────────────────────────────────────── */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    line-height: 1;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Editorial Nav pattern ───────────────────────────────────────────── */
/* Top nav: cream bg + 2px graphite bottom border */
.app-nav {
    background: #FAFAF7;
    border-bottom: 2px solid #111111;
}

/* ── Editorial panel title accent ────────────────────────────────────── */
.panel-title-editorial {
    border-left: 3px solid #B8960C;
    padding-left: 0.625rem;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #111111;
}

/* ── Section tag (gold underline label) ──────────────────────────────── */
.section-tag {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 800;
    color: #B8960C;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    border-bottom: 2px solid #B8960C;
    padding-bottom: 2px;
    margin-bottom: 0.75rem;
}

/* ── Gold delta / stat accent ────────────────────────────────────────── */
.text-gold {
    color: #B8960C;
}
.bg-gold {
    background: #B8960C;
}
.border-gold {
    border-color: #B8960C;
}

/* ── Light-mode text overrides ───────────────────────────────────────── */
/* text-white: flip to graphite everywhere in light mode */
.text-white { color: #111111 !important; }

/* Restore white text on intentionally dark Tailwind bg elements */
.bg-gray-900 .text-white, .bg-gray-900.text-white,
.bg-gray-800 .text-white, .bg-gray-800.text-white,
.bg-gray-700 .text-white, .bg-gray-700.text-white,
.bg-black .text-white, .bg-black.text-white,
/* Semi-transparent black overlays (timer, scoreboard, etc.) */
.bg-black\/50 .text-white, .bg-black\/50.text-white,
.bg-black\/60 .text-white, .bg-black\/70 .text-white,
.bg-black\/80 .text-white, .bg-black\/90 .text-white,
.bg-black\/95 .text-white,
.bg-gray-900\/80 .text-white, .bg-gray-900\/90 .text-white { color: #ffffff !important; }

/* Restore white text on colored action/status backgrounds */
.bg-red-500 .text-white, .bg-red-600 .text-white, .bg-red-700 .text-white,
.bg-red-500.text-white, .bg-red-600.text-white, .bg-red-700.text-white,
.bg-blue-500 .text-white, .bg-blue-600 .text-white, .bg-blue-700 .text-white,
.bg-blue-500.text-white, .bg-blue-600.text-white, .bg-blue-700.text-white,
.bg-green-600 .text-white, .bg-green-700 .text-white,
.bg-green-600.text-white, .bg-green-700.text-white,
.bg-purple-500 .text-white, .bg-purple-600 .text-white,
.bg-purple-500.text-white, .bg-purple-600.text-white,
.bg-indigo-600 .text-white, .bg-indigo-600.text-white,
.bg-orange-500 .text-white, .bg-orange-600 .text-white,
.bg-orange-500.text-white, .bg-orange-600.text-white { color: #ffffff !important; }

/* Gray text classes designed for dark backgrounds — flip to readable dark */
.text-gray-50  { color: #111111 !important; }
.text-gray-100 { color: #1f2937 !important; }
.text-gray-200 { color: #374151 !important; }
.text-gray-300 { color: #4b5563 !important; }

/* Restore light gray text inside genuinely dark containers */
.bg-gray-900 .text-gray-200, .bg-gray-900 .text-gray-300,
.bg-gray-900 .text-gray-100, .bg-gray-900 .text-gray-400,
.bg-gray-800 .text-gray-200, .bg-gray-800 .text-gray-300,
.bg-gray-800 .text-gray-400 { color: #9ca3af !important; }