/*
 * Revio — Design Tokens
 * Paleta Tech Premium (Indigo + Cyan) definida en BRANDING.md
 *
 * Las variables viven en :root con valores por defecto (dark mode).
 * El bloque [data-theme="light"] sobrescribe los tokens superficiales
 * cuando el usuario activa el modo claro.
 *
 * NO editar aquí colores específicos de componentes — esos van en app.css.
 * Este archivo es SOLO el contrato de tokens.
 */

:root,
[data-theme="dark"] {

    /* =========================
       MARCA
       ========================= */
    --color-primary:         #4F46E5;  /* Indigo 600 */
    --color-primary-hover:   #4338CA;  /* Indigo 700 */
    --color-primary-active:  #3730A3;  /* Indigo 800 */
    --color-primary-soft:    rgba(79, 70, 229, 0.15);

    --color-accent:          #06B6D4;  /* Cyan 500 */
    --color-accent-hover:    #0891B2;  /* Cyan 600 */
    --color-accent-soft:     rgba(6, 182, 212, 0.15);

    /* =========================
       FONDOS Y SUPERFICIES (dark)
       ========================= */
    --bg-base:               #0F172A;  /* Slate 900 */
    --bg-surface:            #1E293B;  /* Slate 800 */
    --bg-surface-2:          #334155;  /* Slate 700 */
    --bg-elevated:           #475569;  /* Slate 600 */
    --bg-inverse:            #F8FAFC;  /* para contrast */

    /* =========================
       BORDES
       ========================= */
    --border-base:           #334155;  /* Slate 700 */
    --border-strong:         #475569;  /* Slate 600 */
    --border-subtle:         rgba(148, 163, 184, 0.15);

    /* =========================
       TEXTO
       ========================= */
    --text-high:             #F1F5F9;  /* Slate 100 */
    --text-mid:              #94A3B8;  /* Slate 400 */
    --text-low:              #64748B;  /* Slate 500 */
    --text-on-primary:       #FFFFFF;
    --text-on-accent:        #083344;  /* Cyan 950 */
    --text-inverse:          #0F172A;
    --text-link:             #818CF8;  /* Indigo 400 */
    --text-link-hover:       #A5B4FC;  /* Indigo 300 */

    /* =========================
       ESTADOS SEMÁNTICOS
       ========================= */
    --color-success:         #10B981;  /* Emerald 500 */
    --color-success-soft:    rgba(16, 185, 129, 0.15);
    --color-success-text:    #34D399;  /* Emerald 400 */

    --color-warning:         #F59E0B;  /* Amber 500 */
    --color-warning-soft:    rgba(245, 158, 11, 0.15);
    --color-warning-text:    #FBBF24;  /* Amber 400 */

    --color-danger:          #F43F5E;  /* Rose 500 */
    --color-danger-soft:     rgba(244, 63, 94, 0.15);
    --color-danger-text:     #FB7185;  /* Rose 400 */

    --color-info:            #0EA5E9;  /* Sky 500 */
    --color-info-soft:       rgba(14, 165, 233, 0.15);
    --color-info-text:       #38BDF8;  /* Sky 400 */

    /* =========================
       ESTADOS DE REPARACIÓN (badges)
       Ver BRANDING.md — se usan en Fase 4
       ========================= */
    --wo-recibido:                    #64748B;  /* Slate */
    --wo-en-diagnostico:              #0EA5E9;  /* Sky */
    --wo-presupuesto-pendiente:       #F59E0B;  /* Amber */
    --wo-presupuesto-enviado:         #4F46E5;  /* Indigo */
    --wo-presupuesto-aprobado:        #10B981;  /* Emerald */
    --wo-presupuesto-rechazado:       #F43F5E;  /* Rose */
    --wo-esperando-repuestos:         #F97316;  /* Orange */
    --wo-en-reparacion:               #06B6D4;  /* Cyan */
    --wo-reparado-pendiente-entrega:  #84CC16;  /* Lime */
    --wo-entregado:                   #22C55E;  /* Green */
    --wo-no-reparable:                #DC2626;  /* Red */
    --wo-abandonado:                  #52525B;  /* Zinc */
    --wo-en-garantia:                 #8B5CF6;  /* Violet */
    --wo-cancelado:                   #737373;  /* Neutral */

    /* =========================
       TIPOGRAFÍA
       ========================= */
    --font-display:          "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-body:             "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono:             "JetBrains Mono", "Fira Code", Consolas, "Courier New", monospace;

    --text-xs:               0.75rem;     /* 12px */
    --text-sm:               0.875rem;    /* 14px */
    --text-base:             1rem;        /* 16px */
    --text-lg:               1.125rem;    /* 18px */
    --text-xl:               1.25rem;     /* 20px */
    --text-2xl:              1.5rem;      /* 24px */
    --text-3xl:              1.875rem;    /* 30px */
    --text-4xl:              2.25rem;     /* 36px */

    --leading-tight:         1.25;
    --leading-snug:          1.375;
    --leading-normal:        1.5;
    --leading-relaxed:       1.625;

    --font-weight-regular:   400;
    --font-weight-medium:    500;
    --font-weight-semibold:  600;
    --font-weight-bold:      700;
    --font-weight-extrabold: 800;

    --tracking-tight:        -0.015em;
    --tracking-normal:       0;
    --tracking-wide:         0.025em;
    --tracking-wider:        0.05em;

    /* =========================
       ESPACIADO (sistema 4px)
       ========================= */
    --space-0:               0;
    --space-1:               0.25rem;     /* 4px */
    --space-2:               0.5rem;      /* 8px */
    --space-3:               0.75rem;     /* 12px */
    --space-4:               1rem;        /* 16px */
    --space-5:               1.25rem;     /* 20px */
    --space-6:               1.5rem;      /* 24px */
    --space-8:               2rem;        /* 32px */
    --space-10:              2.5rem;      /* 40px */
    --space-12:              3rem;        /* 48px */
    --space-16:              4rem;        /* 64px */
    --space-20:              5rem;        /* 80px */

    /* =========================
       RADIOS
       ========================= */
    --radius-sm:             4px;
    --radius-md:             8px;
    --radius-lg:             12px;
    --radius-xl:             16px;
    --radius-full:           9999px;

    /* =========================
       SOMBRAS (dark mode: sombras más sutiles)
       ========================= */
    --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
    --shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
    --shadow-xl:   0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
    --shadow-glow-primary: 0 0 0 3px rgba(79, 70, 229, 0.3);
    --shadow-glow-accent:  0 0 0 3px rgba(6, 182, 212, 0.3);

    /* =========================
       LAYOUT
       ========================= */
    --sidebar-width:         260px;
    --sidebar-width-collapsed: 64px;
    --topbar-height:         56px;
    --container-max:         1440px;
    --content-padding:       var(--space-6);

    /* =========================
       TRANSICIONES
       ========================= */
    --transition-fast:       120ms ease-out;
    --transition-base:       200ms ease-out;
    --transition-slow:       320ms ease-out;

    /* =========================
       Z-INDEX
       ========================= */
    --z-dropdown:            1000;
    --z-sticky:              1020;
    --z-fixed:               1030;
    --z-modal-backdrop:      1040;
    --z-modal:               1050;
    --z-popover:             1060;
    --z-tooltip:             1070;
    --z-toast:               1080;

}

/* =========================
   MODO CLARO (override solo lo necesario)
   ========================= */
[data-theme="light"] {

    --bg-base:               #F8FAFC;  /* Slate 50 — fondo general */
    --bg-surface:            #FFFFFF;  /* Cards, sidebar, topbar */
    --bg-surface-2:          #F1F5F9;  /* Slate 100 — hover, zebra */
    --bg-elevated:           #E2E8F0;  /* Slate 200 — inputs hover, elevated */
    --bg-inverse:            #0F172A;

    --border-base:           #E2E8F0;  /* Slate 200 */
    --border-strong:         #CBD5E1;  /* Slate 300 */
    --border-subtle:         rgba(148, 163, 184, 0.18);

    --text-high:             #1E293B;  /* Slate 800 — más suave que 900 */
    --text-mid:              #64748B;  /* Slate 500 */
    --text-low:              #94A3B8;  /* Slate 400 */
    --text-on-primary:       #FFFFFF;
    --text-on-accent:        #083344;
    --text-inverse:          #F1F5F9;
    --text-link:             #4F46E5;
    --text-link-hover:       #3730A3;  /* Indigo 800 para más contraste */

    --color-primary-soft:    rgba(79, 70, 229, 0.08);
    --color-accent-soft:     rgba(6, 182, 212, 0.08);
    --color-success-soft:    rgba(16, 185, 129, 0.08);
    --color-warning-soft:    rgba(245, 158, 11, 0.08);
    --color-danger-soft:     rgba(244, 63, 94, 0.08);
    --color-info-soft:       rgba(14, 165, 233, 0.08);

    --color-success-text:    #047857;  /* Emerald 700 */
    --color-warning-text:    #B45309;  /* Amber 700 */
    --color-danger-text:     #BE123C;  /* Rose 700 */
    --color-info-text:       #0369A1;  /* Sky 700 */

    /* Sombras para light mode: más refinadas con doble capa */
    --shadow-sm:   0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 1px rgba(15, 23, 42, 0.04);
    --shadow-md:   0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
    --shadow-lg:   0 10px 20px -4px rgba(15, 23, 42, 0.10), 0 4px 8px -4px rgba(15, 23, 42, 0.05);
    --shadow-xl:   0 20px 30px -6px rgba(15, 23, 42, 0.12), 0 8px 12px -6px rgba(15, 23, 42, 0.06);

    /* Glow más sutil en light */
    --shadow-glow-primary: 0 0 0 3px rgba(79, 70, 229, 0.15);
    --shadow-glow-accent:  0 0 0 3px rgba(6, 182, 212, 0.15);

}

/* =========================
   RESPETO A PREFERENCIAS DEL SISTEMA
   Si el usuario no ha elegido explícitamente un tema,
   caemos al del sistema (light = claro, otherwise = dark por defecto).
   ========================= */
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        --bg-base:               #F8FAFC;
        --bg-surface:            #FFFFFF;
        --bg-surface-2:          #F1F5F9;
        --bg-elevated:           #E2E8F0;
        --bg-inverse:            #0F172A;
        --border-base:           #E2E8F0;
        --border-strong:         #CBD5E1;
        --border-subtle:         rgba(148, 163, 184, 0.18);
        --text-high:             #1E293B;
        --text-mid:              #64748B;
        --text-low:              #94A3B8;
        --text-inverse:          #F1F5F9;
        --text-link:             #4F46E5;
        --text-link-hover:       #3730A3;
        --color-primary-soft:    rgba(79, 70, 229, 0.08);
        --color-accent-soft:     rgba(6, 182, 212, 0.08);
        --color-success-text:    #047857;
        --color-warning-text:    #B45309;
        --color-danger-text:     #BE123C;
        --color-info-text:       #0369A1;
        --shadow-sm:   0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 1px rgba(15, 23, 42, 0.04);
        --shadow-md:   0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
        --shadow-lg:   0 10px 20px -4px rgba(15, 23, 42, 0.10), 0 4px 8px -4px rgba(15, 23, 42, 0.05);
        --shadow-xl:   0 20px 30px -6px rgba(15, 23, 42, 0.12), 0 8px 12px -6px rgba(15, 23, 42, 0.06);
        --shadow-glow-primary: 0 0 0 3px rgba(79, 70, 229, 0.15);
        --shadow-glow-accent:  0 0 0 3px rgba(6, 182, 212, 0.15);
    }
}