/**
 * CIMA Móvil — Paletas de tema (m.appcima.com)
 * Archivo  : app/movil/palettes.css
 * Función  : Las 4 paletas de color del móvil + modo automático. SIN wallpaper, SIN glass:
 *            fondos planos por tema. Aquí es el ÚNICO sitio donde se escriben colores
 *            literales; el resto de la app consume variables (regla de oro CIMA).
 *            Expone también los nombres LEGADOS de cima (--text-main, --glass-bg, …) para
 *            que los módulos que se vayan portando hereden la paleta sin tocar su CSS.
 * Autores  : CIMA Development Group
 * Copyright: © 2024–2026 CIMA Development Group. Todos los derechos reservados.
 */

:root {
    --radius: 16px;
    --radius-sm: 12px;
    --dock-h: 64px;
    --hdr-h: 56px;
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ease: cubic-bezier(.22, .61, .36, 1);
    --tap: 44px;
}

/* ── Grafito (oscuro neutro; también es el modo AUTO cuando el sistema está oscuro) ── */
html[data-paleta="grafito"],
html[data-paleta="auto"] {
    color-scheme: dark;
    --bg: #0e1116;  --surface: #161b22;  --surface-2: #1d2430;  --line: #273040;
    --text: #e7edf5; --muted: #8b98ab;
    --primary: #3fa9ff; --primary-ink: #04121f; --accent: #63f79a; --danger: #ff6b7a; --warn: #f7c14f;
}

/* ── Claro (también es el modo AUTO cuando el sistema está claro) ── */
html[data-paleta="claro"] {
    color-scheme: light;
    --bg: #eef1f6;  --surface: #ffffff;  --surface-2: #f3f6fb;  --line: #dbe2ec;
    --text: #141a22; --muted: #5c6b7e;
    --primary: #1f6feb; --primary-ink: #ffffff; --accent: #0ea371; --danger: #d83a4a; --warn: #b7791f;
}
@media (prefers-color-scheme: light) {
    html[data-paleta="auto"] {
        color-scheme: light;
        --bg: #eef1f6;  --surface: #ffffff;  --surface-2: #f3f6fb;  --line: #dbe2ec;
        --text: #141a22; --muted: #5c6b7e;
        --primary: #1f6feb; --primary-ink: #ffffff; --accent: #0ea371; --danger: #d83a4a; --warn: #b7791f;
    }
}

/* ── Océano ── */
html[data-paleta="oceano"] {
    color-scheme: dark;
    --bg: #0a1622;  --surface: #0f2233;  --surface-2: #143046;  --line: #1e4055;
    --text: #e4f2fb; --muted: #83a6bd;
    --primary: #22c3d6; --primary-ink: #042027; --accent: #5ad1a6; --danger: #ff7a8a; --warn: #f2c65b;
}

/* ── Violeta ── */
html[data-paleta="violeta"] {
    color-scheme: dark;
    --bg: #120e1c;  --surface: #1b1530;  --surface-2: #241a40;  --line: #332752;
    --text: #efe9fb; --muted: #a294c2;
    --primary: #a06bff; --primary-ink: #0f0820; --accent: #f7b955; --danger: #ff6b8f; --warn: #f7b955;
}

/* ── Derivados (iguales para todas las paletas; nacen de los tokens de arriba) ── */
html[data-paleta] {
    --mask: color-mix(in srgb, var(--bg) 62%, transparent);
    --shadow: 0 10px 28px color-mix(in srgb, var(--bg) 70%, transparent);
    --shadow-fab: 0 8px 22px color-mix(in srgb, var(--primary) 50%, transparent);
    --tint-primary: color-mix(in srgb, var(--primary) 18%, transparent);
    --tint-accent: color-mix(in srgb, var(--accent) 20%, transparent);
    --tint-danger: color-mix(in srgb, var(--danger) 16%, transparent);
    --focus: 0 0 0 3px color-mix(in srgb, var(--primary) 35%, transparent);

    /* ── Puente LEGADO cima → los módulos portados leen estas variables ── */
    --text-main: var(--text);
    --text-muted: var(--muted);
    --placeholder-color: var(--muted);
    --glass-opacity: 1;
    --glass-blur: 0px;
    --glass-bg: var(--surface);
    --surface-bg: var(--surface);
    --glass-border: var(--line);
    --input-bg: var(--surface-2);
    --input-border: var(--line);
    --btn-ghost-bg: var(--surface-2);
    --btn-ghost-hover: var(--surface-2);
    --chip-bg: var(--surface-2);
    --chip-active-bg: var(--tint-primary);
    --drawer-bg: var(--surface);
    --scrollbar-thumb: var(--line);
}