/* Identidad visual FAG (Federación Atlética Guipuzcoana):
   negro #050301 como principal y amarillo-oro #FFD700 como acento. */

:root {
    /* ---- Negro de marca ---- */
    --ms-brand: #050301;

    /* ---- Escala dorada (acento) ---- */
    --ms-gold-100: #FFF7D6;
    --ms-gold-200: #FFEDAD;
    --ms-gold-300: #FFE45C;
    --ms-gold-400: #FFD700; /* oro corporativo */
    --ms-gold-500: #E6C200;
    --ms-gold-600: #B79500;
    --ms-gold-700: #8A6F00;
    --ms-gold-ink: #6E5700; /* dorado legible sobre fondo claro */

    /* ---- Escala negra / neutra (secundario) ---- */
    --ms-ink-950: #08090C;
    --ms-ink-900: #111318;
    --ms-ink-800: #1C1F27;
    --ms-ink-700: #2C313C;
    --ms-ink-600: #444A58;
    --ms-ink-500: #646B7B;
    --ms-ink-400: #8C93A1;
    --ms-ink-300: #B9BEC8;
    --ms-ink-200: #DDE0E6;
    --ms-ink-100: #EDEFF3;
    --ms-ink-50: #F6F7F9;

    /* ---- Amarillo de apoyo (compatibilidad con componentes) ---- */
    --ms-amber-300: var(--ms-gold-300);
    --ms-amber-400: var(--ms-gold-400);
    --ms-amber-500: var(--ms-gold-500);
    --ms-amber-600: var(--ms-gold-600);
    --ms-amber-ink: var(--ms-gold-ink); /* amarillo legible sobre fondo claro */

    /* ---- Estado ---- */
    --ms-danger: #D6293E;
    --ms-danger-soft: #FDECEE;
    --ms-success: #0F8A5F;

    /* ---- Tipografía corporativa FAG: Arial (fuente oficial de la federación).
       Display: la variante gruesa itálica evoca el lettering del logo. ---- */
    --ms-font-sans: Arial, "Helvetica Neue", Helvetica, "Segoe UI", sans-serif;
    --ms-font-display: "Arial Black", "Arial Bold", Arial, "Helvetica Neue", sans-serif;
    --ms-font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

    /* ---- Radios ---- */
    --ms-radius-sm: 6px;
    --ms-radius: 10px;
    --ms-radius-lg: 16px;
    --ms-radius-xl: 24px;
    --ms-radius-full: 999px;

    /* ---- Sombras ---- */
    --ms-shadow-xs: 0 1px 2px rgb(8 9 12 / 0.06);
    --ms-shadow-sm: 0 1px 3px rgb(8 9 12 / 0.08), 0 1px 2px rgb(8 9 12 / 0.04);
    --ms-shadow-md: 0 8px 24px -8px rgb(8 9 12 / 0.16), 0 2px 6px rgb(8 9 12 / 0.05);
    --ms-shadow-lg: 0 24px 56px -16px rgb(8 9 12 / 0.22);

    /* ---- Transiciones ---- */
    --ms-transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ---- Tokens semánticos (tema claro) ---- */
    --ms-bg: #FFFFFF;
    --ms-bg-subtle: var(--ms-ink-50);
    --ms-surface: #FFFFFF;
    --ms-surface-raised: #FFFFFF;
    --ms-border: var(--ms-ink-200);
    --ms-border-strong: var(--ms-ink-300);

    --ms-text: var(--ms-brand);
    --ms-text-muted: var(--ms-ink-500);
    --ms-text-subtle: var(--ms-ink-400);
    --ms-text-inverse: #FFFFFF;

    --ms-primary: var(--ms-brand);
    --ms-primary-hover: #221C12;
    --ms-primary-active: #000000;
    --ms-primary-soft: #F7F2E2;
    --ms-primary-fg: #FFFFFF;

    /* Inversión deportiva del botón primario al hover: negro -> oro. */
    --ms-btn-invert: var(--ms-gold-400);
    --ms-btn-invert-fg: var(--ms-brand);

    --ms-accent: var(--ms-gold-400);
    --ms-accent-strong: var(--ms-gold-500);
    --ms-accent-fg: var(--ms-brand);
    --ms-accent-text: var(--ms-gold-ink);

    --ms-ring: color-mix(in srgb, var(--ms-gold-500) 45%, transparent);
    --ms-overlay: rgb(5 3 1 / 0.5);

    /* Paleta por deporte: cada código de deporte recibe siempre el mismo tono.
       Ninguno pisa el oro, que está reservado a «en vivo». */
    --ms-hue-blue: #4775B5;
    --ms-hue-teal: #0C8F84;
    --ms-hue-violet: #6742DE;
    --ms-hue-rose: #CE2A5D;
    --ms-hue-green: #1E8749;
    --ms-hue-cyan: #0B7EA8;
    --ms-hue-slate: #55607A;

    /* Metales del podio. */
    --ms-silver-200: #EEF1F5;
    --ms-silver-400: #C3C9D4;
    --ms-silver-600: #98A1B0;
    --ms-bronze-200: #F3DCC6;
    --ms-bronze-400: #D2A06A;
    --ms-bronze-600: #A9763F;

    /* Piezas que cambian de fórmula, no sólo de color, entre temas. */
    --ms-title-gradient: linear-gradient(96deg, var(--ms-brand) 15%, var(--ms-gold-600) 85%);
    --ms-avatar-bg: var(--ms-brand);

    color-scheme: light;
}

/* ms-theme.js resuelve la preferencia (propia o del sistema) y la escribe aquí. */
:root[data-ms-theme="dark"] {
    --ms-bg: var(--ms-brand);
    --ms-bg-subtle: #0D0B08;
    --ms-surface: #14110C;
    --ms-surface-raised: #1C1812;
    --ms-border: #2A251C;
    --ms-border-strong: #3D362A;

    --ms-text: #F5F1E6;
    --ms-text-muted: var(--ms-ink-400);
    --ms-text-subtle: var(--ms-ink-500);

    --ms-primary: var(--ms-gold-400);
    --ms-primary-hover: var(--ms-gold-300);
    --ms-primary-active: var(--ms-gold-200);
    --ms-primary-soft: color-mix(in srgb, var(--ms-gold-400) 16%, transparent);
    --ms-primary-fg: var(--ms-brand);

    --ms-btn-invert: var(--ms-gold-300);
    --ms-btn-invert-fg: var(--ms-brand);

    --ms-accent-text: var(--ms-gold-400);
    --ms-danger: #FF6B7A;
    --ms-danger-soft: color-mix(in srgb, #FF6B7A 14%, transparent);

    --ms-hue-blue: #6E9AD6;
    --ms-hue-teal: #3FC7B7;
    --ms-hue-violet: #A48BFF;
    --ms-hue-rose: #FF7BA3;
    --ms-hue-green: #55C483;
    --ms-hue-cyan: #46B6DD;
    --ms-hue-slate: #94A0B8;

    --ms-title-gradient: linear-gradient(96deg, #fff 15%, var(--ms-gold-400) 85%);
    --ms-avatar-bg: var(--ms-gold-400);

    --ms-shadow-md: 0 8px 24px -8px rgb(0 0 0 / 0.6);
    --ms-shadow-lg: 0 24px 56px -16px rgb(0 0 0 / 0.7);

    color-scheme: dark;
}