/* =====================================================================
   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.

   El tema se compone de dos ejes independientes:
     · modo   -> data-theme="light" | "dark"   (sin atributo = automático)
     · acento -> data-accent="esmeralda" | "indigo" | "oceano" |
                 "violeta" | "ambar" | "rosa"
   Ambos se aplican sobre <html> y los gestiona js/theme.js.
   ===================================================================== */

/* ------------------------------------------------------------------
   1. Paletas de acento
   Cada acento publica una escala neutra respecto al modo; más abajo
   el modo claro y el oscuro deciden qué peldaño de la escala usan.
   ------------------------------------------------------------------ */
:root,
:root[data-accent="esmeralda"] {
    --a-300: #6ee7b7;
    --a-400: #34d399;
    --a-500: #10b981;
    --a-600: #059669;
    --a-700: #047857;
    --a-rgb: 16 185 129;
    --a-on: #ffffff;
    --a-on-dark: #052e21;
    --a-icon: brightness(0) invert(1);
}

:root[data-accent="indigo"] {
    --a-300: #a5b4fc;
    --a-400: #818cf8;
    --a-500: #6366f1;
    --a-600: #4f46e5;
    --a-700: #4338ca;
    --a-rgb: 99 102 241;
    --a-on: #ffffff;
    --a-on-dark: #1a1856;
    --a-icon: brightness(0) invert(1);
}

:root[data-accent="oceano"] {
    --a-300: #7dd3fc;
    --a-400: #38bdf8;
    --a-500: #0ea5e9;
    --a-600: #0284c7;
    --a-700: #0369a1;
    --a-rgb: 14 165 233;
    --a-on: #ffffff;
    --a-on-dark: #05304a;
    --a-icon: brightness(0) invert(1);
}

:root[data-accent="violeta"] {
    --a-300: #c4b5fd;
    --a-400: #a78bfa;
    --a-500: #8b5cf6;
    --a-600: #7c3aed;
    --a-700: #6d28d9;
    --a-rgb: 139 92 246;
    --a-on: #ffffff;
    --a-on-dark: #2b1065;
    --a-icon: brightness(0) invert(1);
}

:root[data-accent="ambar"] {
    --a-300: #fcd34d;
    --a-400: #fbbf24;
    --a-500: #f59e0b;
    --a-600: #d97706;
    --a-700: #b45309;
    --a-rgb: 245 158 11;
    /* El ámbar no da contraste suficiente con texto blanco. */
    --a-on: #2a1a02;
    --a-on-dark: #2a1a02;
    --a-icon: brightness(0);
}

:root[data-accent="rosa"] {
    --a-300: #fda4af;
    --a-400: #fb7185;
    --a-500: #f43f5e;
    --a-600: #e11d48;
    --a-700: #be123c;
    --a-rgb: 244 63 94;
    --a-on: #ffffff;
    --a-on-dark: #4c0519;
    --a-icon: brightness(0) invert(1);
}

/* ------------------------------------------------------------------
   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);

    /* Cromo de página */
    --ml-header-bg: rgb(255 255 255 / 0.85);
    --ml-header-border: #e1e6ec;
    --ml-footer-bg: #141b24;
    --ml-footer-text: #b7c1cd;
    --ml-footer-heading: #ffffff;
    --ml-footer-border: rgb(255 255 255 / 0.10);

    /* 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 */
    --ml-radius-sm: 6px;
    --ml-radius: 10px;
    --ml-radius-lg: 16px;
    --ml-radius-full: 999px;

    /* Tipografía */
    --ml-font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --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-header-bg: rgb(22 28 36 / 0.85);
        --ml-header-border: #283140;
        --ml-footer-bg: #0a0e14;
        --ml-footer-text: #8c9aab;
        --ml-footer-heading: #e7edf4;
        --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-header-bg: rgb(22 28 36 / 0.85);
    --ml-header-border: #283140;
    --ml-footer-bg: #0a0e14;
    --ml-footer-text: #8c9aab;
    --ml-footer-heading: #e7edf4;
    --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;
    }
}