/* =====================================================
   FutData - Temas de la pagina
   -----------------------------------------------------
   La paleta entera sale de estas variables. El tema
   "Clasico" es el de siempre; "Cancha" cambia los violetas
   y coral por verdes de cancha. Se elige desde la tuerca
   de Ajustes y se guarda en localStorage.
   ===================================================== */

:root {
    color-scheme: dark;

    /* Marca: coral / violeta / turquesa */
    --fd-brand-50: 246 240 255;
    --fd-brand-100: 234 217 255;
    --fd-brand-200: 217 187 255;
    --fd-brand-300: 201 155 255;
    --fd-brand-400: 255 154 122;
    --fd-brand-500: 193 69 58;
    --fd-brand-600: 122 31 168;
    --fd-brand-700: 90 22 128;
    --fd-brand-900: 38 16 74;
    --fd-brand-500-hover: 224 96 79;
    --fd-brand-600-hover: 155 53 207;
    --fd-accent: 178 79 224;
    --fd-glow: 168 96 235;

    /* Neutros */
    --fd-slate-50: 247 245 255;
    --fd-slate-100: 241 239 250;
    --fd-slate-200: 227 224 243;
    --fd-slate-300: 205 201 230;
    --fd-slate-400: 169 164 204;
    --fd-slate-500: 125 120 168;
    --fd-slate-600: 79 72 144;
    --fd-slate-700: 53 44 110;
    --fd-slate-800: 36 28 82;
    --fd-slate-900: 22 15 51;
    --fd-slate-950: 11 7 32;

    /* Fondos */
    --fd-bg: 7 4 26;
    --fd-cardbg: 21 14 51;
    --fd-cardbg-alt: 22 15 51;
    --fd-borderbg: 42 33 88;

    /* Acentos secundarios */
    --fd-teal: 42 127 140;
    --fd-teal-hover: 58 154 168;
    --fd-warm: 149 90 46;
    --fd-deep: 30 32 96;

    /* Llaves de copas */
    --fd-bracket: 109 94 240;
    --fd-bracket-hover: 91 79 176;
    --fd-bracket-bg: 18 11 43;
    --fd-bracket-bg-hover: 26 17 64;
    --fd-bracket-text: 230 227 247;
}

html[data-theme="cancha"] {
    /* Marca: verdes de cancha */
    --fd-brand-50: 240 255 246;
    --fd-brand-100: 219 255 233;
    --fd-brand-200: 183 247 207;
    --fd-brand-300: 126 235 170;
    --fd-brand-400: 126 231 145;
    --fd-brand-500: 34 164 92;
    --fd-brand-600: 14 122 67;
    --fd-brand-700: 10 95 54;
    --fd-brand-900: 6 51 29;
    --fd-brand-500-hover: 44 190 108;
    --fd-brand-600-hover: 30 154 88;
    --fd-accent: 126 231 145;
    --fd-glow: 120 255 170;

    /* Neutros con tinte verde */
    --fd-slate-50: 245 255 249;
    --fd-slate-100: 232 248 238;
    --fd-slate-200: 206 236 217;
    --fd-slate-300: 170 214 187;
    --fd-slate-400: 130 180 150;
    --fd-slate-500: 92 144 112;
    --fd-slate-600: 62 110 82;
    --fd-slate-700: 43 84 61;
    --fd-slate-800: 27 59 42;
    --fd-slate-900: 16 42 29;
    --fd-slate-950: 7 23 15;

    /* Fondos */
    --fd-bg: 4 20 11;
    --fd-cardbg: 11 36 22;
    --fd-cardbg-alt: 11 36 22;
    --fd-borderbg: 28 74 48;

    /* Acentos secundarios */
    --fd-teal: 55 166 122;
    --fd-teal-hover: 74 192 146;
    --fd-warm: 117 163 55;
    --fd-deep: 8 46 30;

    /* Llaves de copas */
    --fd-bracket: 74 222 128;
    --fd-bracket-hover: 52 168 98;
    --fd-bracket-bg: 8 27 17;
    --fd-bracket-bg-hover: 14 43 27;
    --fd-bracket-text: 220 244 228;
}

/* Textura de cesped muy sutil para el tema Cancha. Las franjas se
   mantienen por detras de todo y no afectan la lectura. */
html[data-theme="cancha"] body {
    background-color: rgb(var(--fd-bg));
    background-image:
        radial-gradient(1100px 700px at 50% -12%, rgb(var(--fd-brand-500) / .18), transparent 62%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .018) 0 72px, rgba(255, 255, 255, 0) 72px 144px),
        radial-gradient(900px 600px at 0% 0%, rgb(var(--fd-brand-500) / .22), transparent 60%),
        radial-gradient(800px 600px at 100% 8%, rgb(var(--fd-warm) / .16), transparent 60%),
        radial-gradient(900px 700px at 0% 100%, rgb(var(--fd-brand-600) / .22), transparent 60%),
        radial-gradient(900px 700px at 100% 100%, rgb(var(--fd-teal) / .20), transparent 60%);
}

@media (max-width: 767.98px) {
    html[data-theme="cancha"] body {
        background-attachment: scroll;
    }
}