/* =====================================================================
   mlsurvey · sistema de temas
   ---------------------------------------------------------------------
   Todo el color de la aplicación se define aquí como custom properties.
   Ningún componente debería volver a escribir un color literal.

   Modo: data-theme="light" | "dark" (sin atributo = automático), sobre
   <html> y gestionado por js/theme.js.
   El acento es el verde de Menos Lectivas, con su amarillo como color de
   realce.
   ===================================================================== */

/* ------------------------------------------------------------------
   0. Tipografías (alojadas aquí, no en Google Fonts: así no se envía la
   IP de quien participa a terceros). Inter y Plus Jakarta Sans, ambas
   con licencia SIL Open Font License; solo el subconjunto latino.
   ------------------------------------------------------------------ */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/inter-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
        U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 600 800;
    font-display: swap;
    src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
        U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------
   1. Acento
   Escala neutra respecto al modo; más abajo el modo claro y el oscuro
   deciden qué peldaño de la escala usan.
   --a-highlight es el color de realce (pestaña activa, filete de la
   cabecera, títulos en modo oscuro).
   ------------------------------------------------------------------ */
/* Verde y amarillo de menoslectivas.org. El verde de la web (#54B435) no
   da contraste con texto blanco: los fondos usan los peldaños 600 y 700. */
:root {
    --a-300: #9bdc83;
    --a-400: #6ec552;
    --a-500: #54b435;
    --a-600: #2d7f2d;
    --a-700: #246824;
    --a-rgb: 84 180 53;
    --a-on: #ffffff;
    --a-on-dark: #0c1406;
    --a-icon: brightness(0) invert(1);
    --a-highlight: #fbcc49;
    --a-on-highlight: #2a2108;
}

/* ------------------------------------------------------------------
   2. Modo claro (valores por defecto, siempre en :root pelado)
   ------------------------------------------------------------------ */
:root {
    color-scheme: light;

    /* Superficies */
    --ml-bg: #f5f7fa;
    --ml-bg-grad: radial-gradient(1200px 600px at 12% -10%, rgb(var(--a-rgb) / 0.10), transparent 60%);
    --ml-surface: #ffffff;
    --ml-surface-2: #eef1f5;
    --ml-surface-3: #e4e9ef;
    --ml-elevated: #ffffff;

    /* Texto */
    --ml-text: #161d26;
    --ml-text-soft: #414c59;
    --ml-text-muted: #6b7785;
    --ml-text-inverse: #ffffff;

    /* Bordes */
    --ml-border: #e1e6ec;
    --ml-border-strong: #c8d1db;

    /* Acento derivado de la paleta activa */
    --ml-accent: var(--a-600);
    --ml-accent-hover: var(--a-700);
    --ml-accent-active: var(--a-700);
    --ml-accent-text: var(--a-700);
    --ml-accent-contrast: var(--a-on);
    --ml-accent-soft: rgb(var(--a-rgb) / 0.10);
    --ml-accent-soft-hover: rgb(var(--a-rgb) / 0.16);
    --ml-accent-ring: rgb(var(--a-rgb) / 0.32);
    /* Tinte para los SVG cargados con <img>, que ignoran currentColor. */
    --ml-icon-on-accent: var(--a-icon);
    --ml-icon-on-surface: none;

    /* Estados */
    --ml-danger: #dc2626;
    --ml-danger-hover: #b91c1c;
    --ml-danger-soft: rgb(220 38 38 / 0.10);
    --ml-danger-ring: rgb(220 38 38 / 0.30);
    --ml-success: #047857;
    --ml-success-soft: rgb(4 120 87 / 0.10);
    --ml-warning: #b45309;
    --ml-warning-soft: rgb(180 83 9 / 0.12);

    /* Realce y títulos */
    --ml-highlight: var(--a-highlight, var(--a-300));
    --ml-highlight-contrast: var(--a-on-highlight, #111111);
    --ml-heading: var(--a-700);

    /* Cromo de página: cabecera del color de acento, como en la web de
       Menos Lectivas, con un filete del color de realce. */
    --ml-header-bg: var(--a-600);
    --ml-header-border: var(--ml-highlight);
    --ml-header-text: #ffffff;
    --ml-header-text-soft: rgb(255 255 255 / 0.86);
    --ml-header-hover: rgb(255 255 255 / 0.14);
    --ml-header-control-border: rgb(255 255 255 / 0.40);
    --ml-footer-bg: #f9f9f9;
    --ml-footer-text: #4b5563;
    --ml-footer-heading: var(--a-700);
    --ml-footer-border: #e6e6e6;

    /* Sombras */
    --ml-shadow-sm: 0 1px 2px rgb(16 24 40 / 0.06), 0 1px 3px rgb(16 24 40 / 0.08);
    --ml-shadow-md: 0 2px 4px rgb(16 24 40 / 0.05), 0 6px 16px rgb(16 24 40 / 0.09);
    --ml-shadow-lg: 0 8px 12px rgb(16 24 40 / 0.06), 0 18px 40px rgb(16 24 40 / 0.14);
    --ml-shadow-accent: 0 2px 10px rgb(var(--a-rgb) / 0.35);

    /* Radios: esquinas poco redondeadas, como los botones de la web. */
    --ml-radius-sm: 4px;
    --ml-radius: 8px;
    --ml-radius-lg: 12px;
    --ml-radius-full: 999px;

    /* Tipografía */
    --ml-font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --ml-font-heading: "Plus Jakarta Sans", var(--ml-font);
    --ml-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

    --ml-transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ------------------------------------------------------------------
   3. Modo oscuro
   Se aplica por preferencia del sistema salvo que el usuario haya
   elegido explícitamente el claro, y siempre que elija el oscuro.
   ------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --ml-bg: #0d1117;
        --ml-bg-grad: radial-gradient(1200px 600px at 12% -10%, rgb(var(--a-rgb) / 0.16), transparent 60%);
        --ml-surface: #161c24;
        --ml-surface-2: #1d242e;
        --ml-surface-3: #262f3a;
        --ml-elevated: #1d242e;

        --ml-text: #e7edf4;
        --ml-text-soft: #bcc7d4;
        --ml-text-muted: #8c9aab;
        --ml-text-inverse: #0d1117;

        --ml-border: #283140;
        --ml-border-strong: #3a4555;

        --ml-accent: var(--a-500);
        --ml-accent-hover: var(--a-400);
        --ml-accent-active: var(--a-600);
        --ml-accent-text: var(--a-400);
        --ml-accent-contrast: var(--a-on-dark);
        --ml-accent-soft: rgb(var(--a-rgb) / 0.16);
        --ml-accent-soft-hover: rgb(var(--a-rgb) / 0.24);
        --ml-accent-ring: rgb(var(--a-rgb) / 0.42);
        --ml-icon-on-accent: brightness(0);
        --ml-icon-on-surface: invert(1) opacity(0.85);

        --ml-danger: #f87171;
        --ml-danger-hover: #fca5a5;
        --ml-danger-soft: rgb(248 113 113 / 0.16);
        --ml-danger-ring: rgb(248 113 113 / 0.38);
        --ml-success: #34d399;
        --ml-success-soft: rgb(52 211 153 / 0.16);
        --ml-warning: #fbbf24;
        --ml-warning-soft: rgb(251 191 36 / 0.16);

        --ml-heading: var(--ml-highlight);
        --ml-header-bg: color-mix(in srgb, var(--a-700) 55%, #0d1117);
        --ml-footer-bg: #0a0e14;
        --ml-footer-text: #8c9aab;
        --ml-footer-heading: var(--ml-highlight);
        --ml-footer-border: rgb(255 255 255 / 0.08);

        --ml-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.40);
        --ml-shadow-md: 0 2px 4px rgb(0 0 0 / 0.30), 0 6px 16px rgb(0 0 0 / 0.45);
        --ml-shadow-lg: 0 8px 12px rgb(0 0 0 / 0.35), 0 18px 40px rgb(0 0 0 / 0.55);
        --ml-shadow-accent: 0 2px 12px rgb(var(--a-rgb) / 0.45);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --ml-bg: #0d1117;
    --ml-bg-grad: radial-gradient(1200px 600px at 12% -10%, rgb(var(--a-rgb) / 0.16), transparent 60%);
    --ml-surface: #161c24;
    --ml-surface-2: #1d242e;
    --ml-surface-3: #262f3a;
    --ml-elevated: #1d242e;

    --ml-text: #e7edf4;
    --ml-text-soft: #bcc7d4;
    --ml-text-muted: #8c9aab;
    --ml-text-inverse: #0d1117;

    --ml-border: #283140;
    --ml-border-strong: #3a4555;

    --ml-accent: var(--a-500);
    --ml-accent-hover: var(--a-400);
    --ml-accent-active: var(--a-600);
    --ml-accent-text: var(--a-400);
    --ml-accent-contrast: var(--a-on-dark);
    --ml-accent-soft: rgb(var(--a-rgb) / 0.16);
    --ml-accent-soft-hover: rgb(var(--a-rgb) / 0.24);
    --ml-accent-ring: rgb(var(--a-rgb) / 0.42);
    --ml-icon-on-accent: brightness(0);
    --ml-icon-on-surface: invert(1) opacity(0.85);

    --ml-danger: #f87171;
    --ml-danger-hover: #fca5a5;
    --ml-danger-soft: rgb(248 113 113 / 0.16);
    --ml-danger-ring: rgb(248 113 113 / 0.38);
    --ml-success: #34d399;
    --ml-success-soft: rgb(52 211 153 / 0.16);
    --ml-warning: #fbbf24;
    --ml-warning-soft: rgb(251 191 36 / 0.16);

    --ml-heading: var(--ml-highlight);
    --ml-header-bg: color-mix(in srgb, var(--a-700) 55%, #0d1117);
    --ml-footer-bg: #0a0e14;
    --ml-footer-text: #8c9aab;
    --ml-footer-heading: var(--ml-highlight);
    --ml-footer-border: rgb(255 255 255 / 0.08);

    --ml-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.40);
    --ml-shadow-md: 0 2px 4px rgb(0 0 0 / 0.30), 0 6px 16px rgb(0 0 0 / 0.45);
    --ml-shadow-lg: 0 8px 12px rgb(0 0 0 / 0.35), 0 18px 40px rgb(0 0 0 / 0.55);
    --ml-shadow-accent: 0 2px 12px rgb(var(--a-rgb) / 0.45);
}

/* Quien prefiera menos movimiento, que no lo sufra. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --ml-transition: 0ms;
    }
}