/* ============================================================================
 * SUPERLIGA — DESIGN SYSTEM (capa de tokens · única fuente de verdad)
 *
 * Valores EXACTOS del sistema de diseño (bloque #2). Este archivo se carga
 * ANTES de site.css y define todo el vocabulario de tokens `--sl-*`.
 *
 * Lenguaje: "soft UI" con personalidad HUD. Sombras suaves (e1/e2/e3),
 * bordes tenues, JetBrains Mono para números/marcadores.
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * TOKENS — TEMA CLARO (por defecto)
 * ------------------------------------------------------------------------- */
:root {
    color-scheme: light;

    /* ---- Marca ---- */
    --sl-brand: #ff5d8f;
    --sl-brand-hover: color-mix(in srgb, var(--sl-brand) 92%, #000);   /* −8% L */
    --sl-brand-soft: color-mix(in srgb, var(--sl-brand) 12%, transparent);

    /* ---- Tinta (texto) ---- */
    --sl-ink: #1a1815;
    --sl-ink-2: #5a503e;
    --sl-ink-3: #6d6354;

    /* ---- Fondos y superficie ---- */
    --sl-bg: #fff8eb;
    --sl-bg-2: #fff1d4;
    --sl-surface: #ffffff;
    --sl-border: #e8dcc4;

    /* ---- Semánticos ---- */
    --sl-success: #16a34a;
    --sl-warn: #ea580c;
    --sl-error: #dc2626;
    --sl-info: #0ea5e9;
    --sl-success-soft: color-mix(in srgb, var(--sl-success) 14%, transparent);
    --sl-warn-soft: color-mix(in srgb, var(--sl-warn) 14%, transparent);
    --sl-error-soft: color-mix(in srgb, var(--sl-error) 14%, transparent);
    --sl-info-soft: color-mix(in srgb, var(--sl-info) 14%, transparent);

    /* ---- Acentos por módulo ---- */
    --sl-mod-football: #16a34a;
    --sl-mod-f1: #e10600;
    --sl-mod-euro: #7c3aed;
    --sl-mod-cagada: #8b5e3c;

    /* ---- Medallas y contraste ---- */
    --sl-medal-gold: #d4af37;
    --sl-medal-silver: #c0c0c0;
    --sl-medal-bronze: #cd7f32;
    --sl-text-on-color: #fff;

    /* ---- Sombras (solo 3) ---- */
    --sl-e1: 0 1px 3px rgba(0, 0, 0, .06);
    --sl-e2: 0 4px 12px rgba(0, 0, 0, .08);
    --sl-e3: 0 12px 32px rgba(0, 0, 0, .16);

    /* ---- Radios ---- */
    --sl-r-sm: 8px;
    --sl-r-md: 12px;
    --sl-r-card: 14px;
    --sl-r-lg: 16px;
    --sl-r-pill: 999px;

    /* ---- Escala de espacio (4px) ---- */
    --sl-space-4: 4px;
    --sl-space-8: 8px;
    --sl-space-12: 12px;
    --sl-space-16: 16px;
    --sl-space-20: 20px;
    --sl-space-24: 24px;
    --sl-space-32: 32px;
    --sl-space-40: 40px;
    --sl-space-48: 48px;
    --sl-space-64: 64px;

    /* ---- Tipografía: familias ---- */
    --sl-font-display: 'Bricolage Grotesque', 'Space Grotesk', system-ui, sans-serif;
    --sl-font-body: 'Space Grotesk', system-ui, sans-serif;
    --sl-font-mono: 'JetBrains Mono', ui-monospace, 'DM Mono', monospace;

    /* ---- Tipografía: escala (size / line-height / weight / tracking) ---- */
    --sl-fs-display: 48px;  --sl-lh-display: 1.0;   --sl-fw-display: 800;  --sl-tr-display: -0.03em;
    --sl-fs-h1: 32px;       --sl-lh-h1: 1.05;       --sl-fw-h1: 800;       --sl-tr-h1: -0.02em;
    --sl-fs-h2: 24px;       --sl-lh-h2: 1.1;        --sl-fw-h2: 700;       --sl-tr-h2: -0.02em;
    --sl-fs-h3: 19px;       --sl-lh-h3: 1.2;        --sl-fw-h3: 700;       --sl-tr-h3: -0.01em;
    --sl-fs-h4: 16px;       --sl-lh-h4: 1.3;        --sl-fw-h4: 700;       --sl-tr-h4: 0;
    --sl-fs-body: 16px;     --sl-lh-body: 1.55;     --sl-fw-body: 400;     --sl-tr-body: 0;
    --sl-fs-small: 14px;    --sl-lh-small: 1.5;     --sl-fw-small: 500;    --sl-tr-small: 0;
    --sl-fs-kicker: 12px;   --sl-lh-kicker: 1.4;    --sl-fw-kicker: 700;   --sl-tr-kicker: 0.14em;

    /* ---- Movimiento ---- */
    --sl-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --sl-dur-micro: 100ms;
    --sl-dur-std: 180ms;
    --sl-dur-emph: 250ms;
    --sl-dur-page: 200ms;

    /* ---- Foco ---- */
    --sl-focus-ring: 0 0 0 2px color-mix(in srgb, var(--sl-brand) 45%, transparent);
    --sl-focus-offset: 2px;

    /* ---- Layout ---- */
    --sl-page-max: 1500px;
    --sl-page-pad: 32px;        /* desktop; móvil 16px vía @media abajo */
    --sl-topbar-h: 64px;
    --sl-drawer-w: 260px;
}

/* ---------------------------------------------------------------------------
 * TOKENS — TEMA OSCURO
 * Sombras: misma forma; en dark se apoya en el borde sutil, no en + opacidad.
 * ------------------------------------------------------------------------- */
.mud-theme-dark,
[data-theme="dark"] {
    color-scheme: dark;

    --sl-brand: #ff7ba3;
    --sl-brand-hover: color-mix(in srgb, var(--sl-brand) 88%, #fff);
    --sl-brand-soft: color-mix(in srgb, var(--sl-brand) 16%, transparent);

    --sl-ink: #e8eaf0;
    --sl-ink-2: #b8bcc8;
    --sl-ink-3: #7c8190;

    --sl-bg: #15171c;
    --sl-bg-2: #0d0f13;
    --sl-surface: #1d2028;
    --sl-border: #353a48;

    --sl-success: #22c55e;
    --sl-warn: #fb923c;
    --sl-error: #f87171;
    --sl-info: #38bdf8;

    --sl-mod-football: #22c55e;
    --sl-mod-f1: #ff2a1f;
    --sl-mod-euro: #9d6bff;
    --sl-mod-cagada: #b07a4f;

    --sl-medal-gold: #d4af37;
    --sl-medal-silver: #c0c0c0;
    --sl-medal-bronze: #cd7f32;
    --sl-text-on-color: #fff;

    /* misma forma de sombra; el +1px de borde sutil lo aporta cada superficie */
    --sl-e1: 0 1px 3px rgba(0, 0, 0, .35);
    --sl-e2: 0 4px 12px rgba(0, 0, 0, .40);
    --sl-e3: 0 12px 32px rgba(0, 0, 0, .50);
}

/* ---------------------------------------------------------------------------
 * FOCO — :focus-visible en todo lo interactivo (ring 2px brand@45% + offset)
 * ------------------------------------------------------------------------- */
:where(a, button, [role="button"], input, select, textarea, summary, .mud-button-root, .mud-nav-link, [tabindex]):focus-visible {
    outline: 2px solid color-mix(in srgb, var(--sl-brand) 45%, transparent);
    outline-offset: var(--sl-focus-offset);
}

/* ---------------------------------------------------------------------------
 * A11Y — solo lector de pantalla (visualmente oculto)
 * ------------------------------------------------------------------------- */
.sl-sr-only,
.sl-sr-live {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------------------
 * MOVIMIENTO — respeta siempre prefers-reduced-motion
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------------------
 * MODULE COLOR WASH — active module color transitions across the chrome
 * ------------------------------------------------------------------------- */
@property --sl-mod-active {
    syntax: "<color>";
    initial-value: transparent;
    inherits: true;
}

[data-module="home"]     { --sl-mod-active: var(--sl-brand); }
[data-module="football"] { --sl-mod-active: var(--sl-mod-football); }
[data-module="f1"]       { --sl-mod-active: var(--sl-mod-f1); }
[data-module="eurovision"] { --sl-mod-active: var(--sl-mod-euro); }
[data-module="cagada"]   { --sl-mod-active: var(--sl-mod-cagada); }
[data-module="highlights"] { --sl-mod-active: var(--sl-brand); }
[data-module="admin"]    { --sl-mod-active: var(--sl-brand); }

/* ---------------------------------------------------------------------------
 * LAYOUT — padding de página móvil
 * ------------------------------------------------------------------------- */
@media (max-width: 599.98px) {
    :root { --sl-page-pad: 16px; }
}