/* ============================================================
   WANAKY — Design Tokens (Single Source of Truth)
   Importado PRIMERO en App.razor antes de cualquier page CSS.
   Todos los módulos deben usar estas variables en lugar de
   redefinir la paleta localmente.
   ============================================================ */

:root {
    /* ── Brand / Paleta activa ──────────────────────────────
       La paleta por defecto es DORADO. Las otras paletas
       (azul, morado) sólo sobreescriben estas 5 variables vía
       html[data-theme="…"]; el resto se deriva de --wk-primary-rgb. */
    --wk-primary:          #ffd808;
    --wk-primary-rgb:      255, 216, 8;
    --wk-primary-strong:   #e0be07;   /* gradiente / hover (claro) */
    --wk-primary-soft:     #ffe55e;   /* hover en modo oscuro */
    --wk-on-primary:       #171717;   /* texto/íconos sobre el primario */

    /* Derivados — siguen automáticamente al primario activo */
    --wk-primary-hover:    var(--wk-primary-strong);
    --wk-primary-light:    rgba(var(--wk-primary-rgb), 0.14);
    --wk-primary-border:   rgba(var(--wk-primary-rgb), 0.40);
    --wk-primary-ring:     rgba(var(--wk-primary-rgb), 0.18);

    /* ── Ink (negro de marca: sidebar, superficies oscuras) ── */
    --wk-ink:              #141414;
    --wk-ink-2:            #1f1f1f;
    --wk-ink-3:            #2a2a2a;

    /* ── Semantic ───────────────────────────────────────── */
    --wk-success:          #059669;
    --wk-success-hover:    #047857;
    --wk-success-light:    rgba(5, 150, 105, 0.07);
    --wk-success-border:   rgba(5, 150, 105, 0.20);

    --wk-danger:           #ba1a1a;
    --wk-danger-light:     rgba(186, 26, 26, 0.06);
    --wk-danger-border:    rgba(186, 26, 26, 0.18);

    --wk-warning:          #d97706;
    --wk-warning-light:    rgba(217, 119, 6, 0.07);
    --wk-warning-border:   rgba(217, 119, 6, 0.20);
    --wk-warning-text:     #92400e;

    --wk-info:             #0891b2;
    --wk-info-light:       rgba(8, 145, 178, 0.07);
    --wk-info-border:      rgba(8, 145, 178, 0.18);

    /* ── DTE types ──────────────────────────────────────── */
    --wk-ccf:              #7c3aed;
    --wk-ccf-light:        rgba(124, 58, 237, 0.07);
    --wk-ccf-border:       rgba(124, 58, 237, 0.18);
    --wk-fcf:              #0891b2;
    --wk-fcf-light:        rgba(8, 145, 178, 0.07);
    --wk-fcf-border:       rgba(8, 145, 178, 0.18);

    /* ── Surface / Background ───────────────────────────── */
    --wk-bg:               #faf9f4;
    --wk-surface:          rgba(255, 255, 255, 0.95);
    --wk-surface-2:        rgba(250, 249, 244, 0.80);
    --wk-surface-3:        #f5f3ea;
    --wk-glass-bg:         rgba(255, 255, 255, 0.88);
    --wk-glass-border:     rgba(255, 255, 255, 0.55);
    --wk-glass-blur:       blur(24px) saturate(180%);

    /* ── Text ───────────────────────────────────────────── */
    --wk-text:             #1a1a1a;
    --wk-text-2:           #46443d;
    --wk-text-3:           #8a8782;
    --wk-text-4:           #b5b1a8;

    /* ── Border ─────────────────────────────────────────── */
    --wk-border:           rgba(255, 255, 255, 0.55);
    --wk-border-2:         rgba(210, 205, 190, 0.55);

    /* ── Shadow scale (negro neutro) ────────────────────── */
    --wk-shadow-sm:        0 1px 4px rgba(0, 0, 0, 0.05);
    --wk-shadow:           0 2px 12px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.04);
    --wk-shadow-md:        0 4px 24px rgba(0, 0, 0, 0.09), 0 2px 8px rgba(0, 0, 0, 0.05);
    --wk-shadow-lg:        0 12px 48px rgba(0, 0, 0, 0.14), 0 4px 16px rgba(0, 0, 0, 0.06);

    /* ── Border radius ──────────────────────────────────── */
    --wk-r-xs:             4px;
    --wk-r-sm:             8px;
    --wk-r-md:             12px;
    --wk-r-lg:             16px;
    --wk-r-xl:             20px;
    --wk-r-2xl:            24px;
    --wk-r-full:           9999px;

    /* ── Typography ─────────────────────────────────────── */
    --wk-font:             "Inter", "SF Pro Text", system-ui, -apple-system, sans-serif;
    --wk-font-display:     "Manrope", "SF Pro Display", system-ui, sans-serif;
    --wk-font-mono:        "JetBrains Mono", "Fira Code", ui-monospace, monospace;

    /* ── Animation ──────────────────────────────────────── */
    --wk-dur-fast:         150ms;
    --wk-dur-base:         200ms;
    --wk-dur-slow:         300ms;
    --wk-ease-out:         cubic-bezier(0.0, 0.0, 0.2, 1);
    --wk-ease-in:          cubic-bezier(0.4, 0.0, 1, 1);
    --wk-ease-in-out:      cubic-bezier(0.4, 0.0, 0.2, 1);

    /* ── Z-index scale ──────────────────────────────────── */
    --wk-z-base:           0;
    --wk-z-dropdown:       100;
    --wk-z-sticky:         200;
    --wk-z-overlay:        400;
    --wk-z-modal:          500;
    --wk-z-toast:          600;
    --wk-z-tooltip:        700;
}

/* ── Dark mode overrides ──────────────────────────────────── */
html.dark {
    /* En oscuro el primario lo define la paleta activa; sólo se ajusta el hover. */
    --wk-primary-hover:    var(--wk-primary-soft);

    --wk-ink:              #0a0a0a;
    --wk-ink-2:            #141414;
    --wk-ink-3:            #1f1f1f;

    --wk-bg:               #0d0d0d;
    --wk-surface:          rgba(28, 28, 28, 0.94);
    --wk-surface-2:        rgba(20, 20, 20, 0.85);
    --wk-surface-3:        rgba(16, 16, 16, 0.70);
    --wk-glass-bg:         rgba(24, 24, 24, 0.88);
    --wk-glass-border:     rgba(255, 255, 255, 0.08);

    --wk-text:             #ededed;
    --wk-text-2:           #cfcdc7;
    --wk-text-3:           #8a8782;
    --wk-text-4:           #5e5c57;

    --wk-border:           rgba(255, 255, 255, 0.10);
    --wk-border-2:         rgba(255, 255, 255, 0.15);

    --wk-shadow-sm:        0 1px 4px rgba(0, 0, 0, 0.20);
    --wk-shadow:           0 2px 12px rgba(0, 0, 0, 0.25);
    --wk-shadow-md:        0 4px 24px rgba(0, 0, 0, 0.30);
    --wk-shadow-lg:        0 12px 48px rgba(0, 0, 0, 0.40);
}

/* ── Paletas seleccionables (selector de tema) ────────────────
   Sólo cambian el color primario; el negro/blanco estructural y
   las superficies se mantienen. Aplican en claro y oscuro. */

/* AZUL — la paleta original del sistema */
html[data-theme="azul"] {
    --wk-primary:          #0040e0;
    --wk-primary-rgb:      0, 64, 224;
    --wk-primary-strong:   #0035c0;
    --wk-primary-soft:     #8aa4ff;
    --wk-on-primary:       #ffffff;
}

/* MORADO-ROSADO — secundario blanco */
html[data-theme="morado"] {
    --wk-primary:          #c026d3;
    --wk-primary-rgb:      192, 38, 211;
    --wk-primary-strong:   #a21caf;
    --wk-primary-soft:     #e879f9;
    --wk-on-primary:       #ffffff;
}

/* Estructura por paleta (modo CLARO):
   dorado = sidebar NEGRO (por defecto); azul y morado = sidebar BLANCO. */
html[data-theme="azul"]:not(.dark),
html[data-theme="morado"]:not(.dark) {
    --wk-sidebar:      rgba(255, 255, 255, 0.72);
    --wk-side-strong:  #1a1a1a;
    --wk-side-text:    #46443d;
    --wk-side-muted:   #8a8782;
    --wk-side-border:  rgba(0, 0, 0, 0.07);
    --wk-side-env:     #b45309;
}