/*
 * Cx · Biblioteca de temas.
 *
 * Cada tema define los color tokens semánticos (--cx-color-*). La base
 * (typography/spacing/radius/shadow scales) vive en cx-tokens.css y es
 * común a todos los temas.
 *
 * APPLY:
 *   document.documentElement.dataset.theme = 'dark' | 'md3' | 'terminal' | 'vibrant';
 *   (sin atributo o 'light' = default light)
 *
 * EXTENDER:
 *   Para agregar tu tema, copiá un [data-theme="..."] bloque y modificá
 *   las vars. Mantener los nombres canónicos para no romper componentes.
 *
 * GENERADOR DE TEMAS CUSTOM:
 *   Ver cx-theme.js → buildCustomTheme(primary, secondary) — calcula la paleta
 *   completa via HSL math.
 */

/* ════════════════════════════════════════════════════════════════════
 * TEMA "light" (default)
 * ════════════════════════════════════════════════════════════════════ */
:root,
:root[data-theme="light"] {
    color-scheme: light;

    /* Surfaces */
    --cx-color-bg: #fafafa;
    --cx-color-surface: #ffffff;
    --cx-color-surface-alt: #f5f5f5;
    --cx-color-surface-2: #f5f5f5;            /* legacy alias */
    --cx-color-surface-hover: rgba(99, 102, 241, 0.06);
    --cx-color-surface-active: rgba(99, 102, 241, 0.10);
    --cx-color-overlay: rgba(0, 0, 0, 0.5);

    /* Text */
    --cx-color-text: #18181b;
    --cx-color-text-muted: #71717a;
    --cx-color-text-subtle: #a1a1aa;
    --cx-color-text-inverse: #ffffff;

    /* Borders */
    --cx-color-border: #e4e4e7;
    --cx-color-border-strong: #d4d4d8;

    /* Semantic — primary (indigo) */
    --cx-color-primary: #6366f1;
    --cx-color-primary-dark: #4f46e5;
    --cx-color-primary-light: rgba(99, 102, 241, 0.12);
    --cx-color-primary-bg: #eef2ff;
    --cx-color-primary-on: #ffffff;

    /* Semantic — secondary (teal) */
    --cx-color-secondary: #0ea5e9;
    --cx-color-secondary-dark: #0284c7;
    --cx-color-secondary-light: rgba(14, 165, 233, 0.12);

    /* Semantic — feedback */
    --cx-color-success: #16a34a;
    --cx-color-success-light: #d1fae5;
    --cx-color-warn: #d97706;
    --cx-color-warn-light: #fef3c7;
    --cx-color-warn-bg: #fff4e0;             /* legacy */
    --cx-color-danger: #dc2626;
    --cx-color-danger-light: #fee2e2;
    --cx-color-info: #0ea5e9;
    --cx-color-info-light: #dbeafe;

    /* Semantic — accents (categorías / kind indicators, no feedback) */
    --cx-color-violet: #8b5cf6;              /* violet 500 — moderation, special */
    --cx-color-cyan: #06b6d4;                /* cyan 500 — info-secondary, header capabilities */
    --cx-color-pink: #ec4899;                /* pink 500 — emphasis accents */

    /* RGB triples — DERIVADOS de --cx-color-X (palette homologada) para uso
       con alpha en pills/chips/highlights vía rgb(var(--cx-rgb-X) / alpha).
       Cambiar el hex base de un --cx-color-X arriba propaga acá automáticamente
       si actualizás el triple a juego. */
    --cx-rgb-success: 22 163 74;       /* = --cx-color-success #16a34a (green 600) */
    --cx-rgb-info: 14 165 233;         /* = --cx-color-info #0ea5e9 (sky 500) */
    --cx-rgb-warn: 217 119 6;          /* = --cx-color-warn #d97706 (orange 600) */
    --cx-rgb-danger: 220 38 38;        /* = --cx-color-danger #dc2626 (red 600) */
    --cx-rgb-violet: 139 92 246;       /* violet 500 — sin equiv semántico, propio */
    --cx-rgb-slate: 100 116 139;       /* slate 500 — sin equiv semántico, propio */
    /* NOTA: --cx-rgb-info-alt removido — duplicaba --cx-color-primary indigo.
       Para indigo accents usar var(--cx-focus-ring-rgb) o derivar primary. */

    /* Text shades darker — para color de texto sobre pills con bg rgb(X / 0.10).
       Family-coherentes con los --cx-color-X arriba (900 family). */
    --cx-color-success-text: #14532d;   /* green 900 (matches success green 600) */
    --cx-color-info-text: #0c4a6e;      /* sky 900 (matches info sky 500) */
    --cx-color-info-alt-text: #4338ca;  /* indigo 700 — derivado de primary */
    --cx-color-warn-text: #7c2d12;      /* orange 900 (matches warn orange 600) */
    --cx-color-danger-text: #7f1d1d;    /* red 900 (matches danger red 600) */
    --cx-color-violet-text: #6d28d9;    /* violet 700 */
    --cx-color-slate-text: #475569;     /* slate 700 */

    /* Focus ring (RGB triplet sin "rgb()") */
    --cx-focus-ring-rgb: 99 102 241;

    /* Shadow color (RGB triplet) */
    --cx-shadow-color: 0 0 0;

}

/* ════════════════════════════════════════════════════════════════════
 * TEMA "dark"
 * ════════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"],
.pi8-dark {
    color-scheme: dark;

    --cx-color-bg: #0a0a0b;
    --cx-color-surface: #18181b;
    --cx-color-surface-alt: #27272a;
    --cx-color-surface-2: #27272a;
    --cx-color-surface-hover: rgba(129, 140, 248, 0.10);
    --cx-color-surface-active: rgba(129, 140, 248, 0.18);
    --cx-color-overlay: rgba(0, 0, 0, 0.75);

    --cx-color-text: #fafafa;
    --cx-color-text-muted: #a1a1aa;
    --cx-color-text-subtle: #71717a;
    --cx-color-text-inverse: #18181b;

    --cx-color-border: #3f3f46;
    --cx-color-border-strong: #52525b;

    --cx-color-primary: #818cf8;
    --cx-color-primary-dark: #a5b4fc;
    --cx-color-primary-light: rgba(129, 140, 248, 0.18);
    --cx-color-primary-bg: #1e1b4b;
    --cx-color-primary-on: #0a0a0b;

    --cx-color-secondary: #38bdf8;
    --cx-color-secondary-dark: #7dd3fc;
    --cx-color-secondary-light: rgba(56, 189, 248, 0.18);

    --cx-color-success: #22c55e;
    --cx-color-success-light: #052e16;
    --cx-color-warn: #fbbf24;
    --cx-color-warn-light: #451a03;
    --cx-color-warn-bg: #451a03;
    --cx-color-danger: #f87171;
    --cx-color-danger-light: #450a0a;
    --cx-color-info: #38bdf8;
    --cx-color-info-light: #082f49;

    /* Semantic — accents (dark theme shades 400 for contrast) */
    --cx-color-violet: #a78bfa;              /* violet 400 */
    --cx-color-cyan: #22d3ee;                /* cyan 400 */
    --cx-color-pink: #f472b6;                /* pink 400 */

    /* RGB triples — DERIVADOS de --cx-color-X de dark theme (palette homologada).
       En dark mode los --cx-color-X usan shades más claros (400 family) para
       mejor contraste sobre dark surfaces. */
    --cx-rgb-success: 34 197 94;       /* = --cx-color-success #22c55e (green 500) */
    --cx-rgb-info: 56 189 248;         /* = --cx-color-info #38bdf8 (sky 400) */
    --cx-rgb-warn: 251 191 36;         /* = --cx-color-warn #fbbf24 (amber 400) */
    --cx-rgb-danger: 248 113 113;      /* = --cx-color-danger #f87171 (red 400) */
    --cx-rgb-violet: 167 139 250;      /* violet 400 */
    --cx-rgb-slate: 148 163 184;       /* slate 400 */

    /* Text shades lighter para dark mode — family-coherentes con los --cx-color-X */
    --cx-color-success-text: #86efac;   /* green 300 */
    --cx-color-info-text: #7dd3fc;      /* sky 300 */
    --cx-color-info-alt-text: #a5b4fc;  /* indigo 300 — derivado de primary */
    --cx-color-warn-text: #fde68a;      /* amber 200 */
    --cx-color-danger-text: #fca5a5;    /* red 300 */
    --cx-color-violet-text: #c4b5fd;    /* violet 300 */
    --cx-color-slate-text: #cbd5e1;     /* slate 300 */

    --cx-focus-ring-rgb: 129 140 248;
    --cx-shadow-color: 0 0 0;

}

/* ════════════════════════════════════════════════════════════════════
 * TEMA "md3" — Material Design 3 inspired
 * Colores con surface tints, radius generoso, elevations sutiles.
 * ════════════════════════════════════════════════════════════════════ */
:root[data-theme="md3"] {
    color-scheme: light;

    --cx-color-bg: #fef7ff;
    --cx-color-surface: #fffbfe;
    --cx-color-surface-alt: #f3edf7;
    --cx-color-surface-2: #f3edf7;
    --cx-color-surface-hover: rgba(103, 80, 164, 0.08);
    --cx-color-surface-active: rgba(103, 80, 164, 0.16);
    --cx-color-overlay: rgba(28, 27, 31, 0.4);

    --cx-color-text: #1c1b1f;
    --cx-color-text-muted: #49454f;
    --cx-color-text-subtle: #79747e;
    --cx-color-text-inverse: #ffffff;

    --cx-color-border: #cac4d0;
    --cx-color-border-strong: #79747e;

    /* M3 Primary (purple) */
    --cx-color-primary: #6750a4;
    --cx-color-primary-dark: #4f378b;
    --cx-color-primary-light: #eaddff;
    --cx-color-primary-bg: #eaddff;
    --cx-color-primary-on: #ffffff;

    /* M3 Secondary (muted purple) */
    --cx-color-secondary: #625b71;
    --cx-color-secondary-dark: #4a4458;
    --cx-color-secondary-light: #e8def8;

    /* M3 Tertiary (rose) → reusa danger semánticamente */
    --cx-color-success: #006e1c;
    --cx-color-success-light: #b6f3a8;
    --cx-color-warn: #825500;
    --cx-color-warn-light: #ffddb0;
    --cx-color-warn-bg: #ffddb0;
    --cx-color-danger: #b3261e;
    --cx-color-danger-light: #f9dedc;
    --cx-color-info: #0061a4;
    --cx-color-info-light: #d1e4ff;

    /* Text shades sobre fondos -light — tonos "on-container" M3 (contraste AA) */
    --cx-color-success-text: #00390a;
    --cx-color-info-text: #001d36;
    --cx-color-warn-text: #2a1800;
    --cx-color-danger-text: #410e0b;

    /* Radius más generoso, M3 vibes */
    --cx-radius-sm: 8px;
    --cx-radius-md: 12px;
    --cx-radius-lg: 16px;
    --cx-radius-xl: 24px;
    --cx-radius-2xl: 28px;

    --cx-focus-ring-rgb: 103 80 164;
    --cx-shadow-color: 103 80 164;

}

/* ════════════════════════════════════════════════════════════════════
 * TEMA "terminal" — phosphor green + monoespaciado
 * Para admins old school, debug pages, terminal-feel pages.
 * ════════════════════════════════════════════════════════════════════ */
:root[data-theme="terminal"] {
    color-scheme: dark;

    --cx-color-bg: #050505;
    --cx-color-surface: #0a0a0a;
    --cx-color-surface-alt: #111111;
    --cx-color-surface-2: #111111;
    --cx-color-surface-hover: rgba(0, 255, 65, 0.08);
    --cx-color-surface-active: rgba(0, 255, 65, 0.16);
    --cx-color-overlay: rgba(0, 0, 0, 0.85);

    --cx-color-text: #00ff41;
    --cx-color-text-muted: #00b32d;
    --cx-color-text-subtle: #00a328;   /* antes #007a1f — ilegible sobre #050505 */
    --cx-color-text-inverse: #050505;

    --cx-color-border: #00b32d;
    --cx-color-border-strong: #00ff41;

    /* Primary = phosphor green */
    --cx-color-primary: #00ff41;
    --cx-color-primary-dark: #00cc34;
    --cx-color-primary-light: rgba(0, 255, 65, 0.16);
    --cx-color-primary-bg: rgba(0, 255, 65, 0.06);
    --cx-color-primary-on: #050505;

    /* Secondary = amber CRT */
    --cx-color-secondary: #ffb000;
    --cx-color-secondary-dark: #cc8c00;
    --cx-color-secondary-light: rgba(255, 176, 0, 0.16);

    --cx-color-success: #00ff41;
    --cx-color-success-light: rgba(0, 255, 65, 0.16);
    --cx-color-warn: #ffb000;
    --cx-color-warn-light: rgba(255, 176, 0, 0.16);
    --cx-color-warn-bg: rgba(255, 176, 0, 0.06);
    --cx-color-danger: #ff0040;
    --cx-color-danger-light: rgba(255, 0, 64, 0.16);
    --cx-color-info: #00d4ff;
    --cx-color-info-light: rgba(0, 212, 255, 0.16);

    /* Text shades sobre fondos -light — tonos claros para dark scheme (contraste AA) */
    --cx-color-success-text: #00ff41;
    --cx-color-info-text: #66e0ff;
    --cx-color-info-alt-text: #a5b4fc;
    --cx-color-warn-text: #ffc94d;
    --cx-color-danger-text: #ff6680;
    --cx-color-violet-text: #c4b5fd;
    --cx-color-slate-text: #cbd5e1;

    /* Mono everywhere */
    --cx-font-sans: var(--cx-font-mono);
    --cx-font-display: var(--cx-font-mono);

    /* Sin curvas — terminal sharp */
    --cx-radius-none: 0;
    --cx-radius-sm: 0;
    --cx-radius-md: 0;
    --cx-radius-lg: 2px;
    --cx-radius-xl: 2px;
    --cx-radius-2xl: 2px;
    --cx-radius-3xl: 2px;
    --cx-radius-full: 2px;

    --cx-focus-ring-rgb: 0 255 65;
    --cx-shadow-color: 0 255 65;

}

/* Terminal — efecto CRT phosphor glow SOLO en headings/appbar (en todo el
   body degradaba la legibilidad de la tipografía chica). */
:root[data-theme="terminal"] h1,
:root[data-theme="terminal"] h2,
:root[data-theme="terminal"] h3,
:root[data-theme="terminal"] .skl-appbar {
    text-shadow: 0 0 4px rgba(0, 255, 65, 0.3);
}

/* ════════════════════════════════════════════════════════════════════
 * TEMA "vibrant" — gradientes vivos, glass, ultra-visual
 * ════════════════════════════════════════════════════════════════════ */
:root[data-theme="vibrant"] {
    color-scheme: light;

    --cx-color-bg: #fafafa;
    --cx-color-surface: #ffffff;
    --cx-color-surface-alt: #fdf4ff;
    --cx-color-surface-2: #fdf4ff;
    --cx-color-surface-hover: rgba(217, 70, 239, 0.08);
    --cx-color-surface-active: rgba(217, 70, 239, 0.16);
    --cx-color-overlay: rgba(120, 30, 100, 0.5);

    --cx-color-text: #1a0b2e;
    --cx-color-text-muted: #6b4570;
    --cx-color-text-subtle: #9c8aa5;
    --cx-color-text-inverse: #ffffff;

    /* Border neutro gris — el fuchsia queda solo en primary/active (con border
       fuchsia, cada card/input parecía seleccionado). */
    --cx-color-border: #e4e4e7;
    --cx-color-border-strong: #d4d4d8;

    /* Primary = fuchsia bright */
    --cx-color-primary: #d946ef;
    --cx-color-primary-dark: #a21caf;
    --cx-color-primary-light: rgba(217, 70, 239, 0.16);
    --cx-color-primary-bg: #fae8ff;
    --cx-color-primary-on: #ffffff;

    /* Secondary = orange punch */
    --cx-color-secondary: #f97316;
    --cx-color-secondary-dark: #c2410c;
    --cx-color-secondary-light: rgba(249, 115, 22, 0.16);

    --cx-color-success: #10b981;
    --cx-color-success-light: #d1fae5;
    --cx-color-warn: #f59e0b;
    --cx-color-warn-light: #fef3c7;
    --cx-color-warn-bg: #fef3c7;
    --cx-color-danger: #f43f5e;
    --cx-color-danger-light: #fecdd3;
    --cx-color-info: #8b5cf6;
    --cx-color-info-light: #ede9fe;

    /* Text shades sobre fondos -light — 900 family (contraste AA) */
    --cx-color-success-text: #064e3b;
    --cx-color-info-text: #4c1d95;
    --cx-color-warn-text: #78350f;
    --cx-color-danger-text: #881337;

    --cx-focus-ring-rgb: 217 70 239;
    --cx-shadow-color: 217 70 239;

    /* Bordes más curvos */
    --cx-radius-sm: 6px;
    --cx-radius-md: 10px;
    --cx-radius-lg: 14px;
    --cx-radius-xl: 20px;
    --cx-radius-2xl: 28px;

}

/* Vibrant — pageado con gradient background sutil */
:root[data-theme="vibrant"] body {
    background:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(217, 70, 239, 0.15), transparent),
        radial-gradient(ellipse 60% 40% at 80% 110%, rgba(249, 115, 22, 0.12), transparent),
        var(--cx-color-bg);
    background-attachment: fixed;
}

/* NOTA: variantes utility gradient/glow (.cx-btn--gradient*, .cx-glow,
   .cx-card--glass) removidas junto con los tokens --cx-gradient-* — política
   de un solo CTA (Primary indigo); verificado 0 consumers por grep. */