/* ================================================================
   FutB — tokens de tema. Claro por defecto, oscuro opcional.
   Todo el sitio (landing, modales y paneles) lee estas variables.
   ================================================================ */

:root,
html[data-theme="light"] {
    color-scheme: light;
    --bg-dark: #ffffff;            /* fondo de página */
    --bg-card: #ffffff;            /* tarjetas, modales */
    --surface-2: #eef1ec;          /* superficie elevada o rellena */
    --bg-body: rgb(20 24 12 / 0.04);
    --text-primary: #14180c;
    --text-secondary: #4b5443;
    --text-muted: #5d6655;
    --border-color: rgb(20 24 12 / 0.14);
    --glass-bg: rgb(255 255 255 / 0.85);
    --glass-border: rgb(20 24 12 / 0.08);
    --ov: 20 24 12;                /* tinta para superposiciones y líneas */
    --bg-rgb: 255 255 255;

    --accent: #15803d;             /* verde principal (5:1 sobre blanco) */
    --accent-rgb: 21 128 61;
    --accent-hover: #166534;
    --on-accent: #ffffff;
    --accent-soft: #e7f4ec;        /* fondo verde suave */
    --focus-ring: #166534;

    --warn: #92600a;   --warn-rgb: 146 96 10;
    --danger: #c62828; --danger-rgb: 198 40 40;
    --info: #0369a1;   --info-rgb: 3 105 161;
    --orange: #c2410c; --orange-rgb: 194 65 12;
    --violet: #0f766e; --violet-rgb: 15 118 110;
    --gold: #92600a;

    --shadow-float: 0 6px 20px rgb(20 24 12 / 0.12);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --bg-dark: #0c0f0b;
    --bg-card: #151a14;
    --surface-2: #1e251c;
    --bg-body: rgb(255 255 255 / 0.04);
    --text-primary: #f3f5f0;
    --text-secondary: #b3bbab;
    --text-muted: #8f988a;
    --border-color: rgb(255 255 255 / 0.12);
    --glass-bg: rgb(12 15 11 / 0.85);
    --glass-border: rgb(255 255 255 / 0.08);
    --ov: 255 255 255;
    --bg-rgb: 12 15 11;

    --accent: #22c55e;
    --accent-rgb: 34 197 94;
    --accent-hover: #4ade80;
    --on-accent: #07140a;
    --accent-soft: #14301d;
    --focus-ring: #86efac;

    --warn: #e0b04a;   --warn-rgb: 224 176 74;
    --danger: #ff6b6b; --danger-rgb: 255 107 107;
    --info: #38a9ff;   --info-rgb: 56 169 255;
    --orange: #ff9f2e; --orange-rgb: 255 159 46;
    --violet: #2dd4bf; --violet-rgb: 45 212 191;
    --gold: #e0b04a;

    --shadow-float: 0 8px 28px rgb(0 0 0 / 0.5);
}

/* Elementos que viven sobre una foto: siempre blancos, en cualquier tema */
.card-badge, .card-rating, #gallery-counter, #prev-photo, #next-photo,
#close-field-details-btn, #close-venue-modal-btn, #venue-modal-name, #venue-modal-location, #venue-modal-location a {
    color: #fff;
}

/* Interruptor de tema */
.theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border: 0; border-radius: 50%;
    background: transparent; color: var(--text-primary); cursor: pointer;
    transition: background-color 0.2s ease;
}
.theme-toggle:hover { background: var(--surface-2); }
.theme-toggle .fa-sun { display: none; }
html[data-theme="dark"] .theme-toggle .fa-sun { display: inline; }
html[data-theme="dark"] .theme-toggle .fa-moon { display: none; }