/* =========================================================
   tokens.css — Sistema de diseño Compu.uy
   Basado en la identidad gráfica de los flyers de marketing:
   · Azul Compu.uy saturado como base dominante
   · Cyan como accent para títulos secundarios / highlights
   · Magenta exclusivo para precios y CTAs de confirmación
   · Blanco puro para tipografía sobre azul
   ========================================================= */

:root {
  /* =========================================
     Paleta cruda
     ========================================= */
  --c-blue-950: #060F47;
  --c-blue-900: #0A1B6E;
  --c-blue-800: #142EA8;
  --c-blue-700: #1636BC;
  --c-blue-600: #1E47E5;  /* PRIMARY — azul Compu.uy */
  --c-blue-500: #3C63EA;
  --c-blue-400: #6585F0;
  --c-blue-300: #95ABF4;

  --c-cyan-300: #7AF4F4;
  --c-cyan-400: #3EE6E6;  /* ACCENT principal (cyan flyer) */
  --c-cyan-500: #24CCCC;
  --c-cyan-600: #14A6A6;

  /* Magenta desaturado — un toque menos eléctrico que original.
     #FF3E8F → #E63284 baja saturación ~12% sin perder identidad.
     Mejora legibilidad sostenida sobre dark/white sin cansar retina. */
  --c-mag-400: #F25A99;
  --c-mag-500: #E63284;   /* PRICE / CTA (rosa flyer ajustado) */
  --c-mag-600: #CC2570;
  --c-mag-700: #A31955;

  /* Progreso de marca: las paradas saturadas evitan el gris/lavanda que
     aparece al interpolar directamente entre cyan y magenta. */
  --gradient-progress: linear-gradient(
    90deg,
    var(--c-cyan-400) 0%,
    var(--c-blue-600) 42%,
    #7A21E6 70%,
    var(--c-mag-500) 100%
  );

  --c-white:    #FFFFFF;
  --c-white-95: rgba(255,255,255,0.95);
  --c-white-80: rgba(255,255,255,0.80);
  --c-white-65: rgba(255,255,255,0.65);
  --c-white-45: rgba(255,255,255,0.45);
  --c-white-20: rgba(255,255,255,0.20);
  --c-white-10: rgba(255,255,255,0.10);
  --c-white-05: rgba(255,255,255,0.05);

  --c-ink-950: #050914;
  --c-ink-900: #0C1530;
  --c-ink-800: #142042;

  /* =========================================
     Semánticos — los REALES viven en [data-theme="light"]
     y [data-theme="dark"] al final del archivo. Estos defaults
     son fallback por si alguien rendereá sin data-theme; usan
     light values. */
  --bg:            #F4F6FB;
  --bg-deep:       #FFFFFF;
  --bg-elevated:   #FFFFFF;
  --bg-subtle:     #FAFBFE;
  --bg-inverse:    var(--c-blue-950);
  --fg:            #0A1B6E;
  --fg-mute:       rgba(10, 27, 110, 0.72);
  --fg-dim:        rgba(10, 27, 110, 0.50);
  --fg-inverse:    var(--c-white);
  --accent:        #1E47E5;
  --accent-text:   #1E47E5;
  --accent-text-dim: #4061D3;
  --accent-strong: #1A3DC9;
  --accent-soft:   #4061D3;
  /* Hover tint = brand blue (no cyan, evita verde mint en light) */
  --accent-tint:   rgba(30, 71, 229, 0.06);
  --accent-tint-strong: rgba(30, 71, 229, 0.12);
  --brand:         var(--c-blue-600);
  --brand-soft:    color-mix(in srgb, var(--c-blue-600) 12%, transparent);
  --price:         #D6286F;
  --price-strong:  #B41F5F;
  --line:          rgba(10, 27, 110, 0.08);
  --line-soft:     rgba(10, 27, 110, 0.04);
  --line-strong:   rgba(10, 27, 110, 0.22);

  /* =========================================
     SEMANTIC FEEDBACK COLORS
     Camila/Sebastián: faltan colores funcionales. Sin estos,
     todos los roles caen en magenta y pierde su semántica.
     Stock low → amber (warning), En stock → green (success),
     errores → red. Esto LIBERA magenta para "comercial puro"
     (precios + CTA + descuentos).
     ========================================= */
  --success:        #0F9D58;             /* verde tech, no farmacia */
  --success-text:   #0B7A44;             /* AAA sobre blanco */
  --success-soft:   rgba(15, 157, 88, 0.12);
  --warning:        #F5A623;             /* ámbar saturado */
  --warning-text:   #8C5A02;             /* AAA contrast sobre blanco */
  --warning-soft:   rgba(245, 166, 35, 0.14);
  --error:          #DC2626;             /* rojo Tailwind 600 */
  --error-text:     #991B1B;
  --error-soft:     rgba(220, 38, 38, 0.10);
  --info:           var(--c-blue-600);
  --info-soft:      rgba(30, 71, 229, 0.08);

  /* =========================================
     SIZING SCALE — control heights, icon sizes
     Sebastián: hoy hay 7 alturas distintas (30/32/34/36/38/40/42/44)
     sin escalón. Estos 4 tokens reemplazan todo.
     ========================================= */
  --ctl-h-xs: 28px;
  --ctl-h-sm: 32px;
  --ctl-h-md: 40px;
  --ctl-h-lg: 44px;     /* WCAG 2.5.8 touch target */

  --ico-xs: 12px;
  --ico-sm: 14px;
  --ico-md: 16px;
  --ico-lg: 20px;
  --ico-xl: 24px;

  --rail-w: 3px;        /* Vertical accent rail (test-card, persona-tile, etc) */
  --bw-emph: 2px;       /* Emphasized border (tabs underline) */

  /* Ícono compartido — data-uri mask, se colorea con background-color (currentColor
     no aplica a mask). Fuente de verdad única: antes este chevron vivía repetido
     como <svg> inline en 15 lugares (11 HTML + 3 JS + reboot). */
  --icon-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E");
  /* Flecha → completa (línea + punta), mismo trazo que el chevron. Para CTAs. */
  --icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3Cpolyline points='13 5 20 12 13 19'/%3E%3C/svg%3E");

  /* Tracking canon — 3 valores fijos (Renata).
     Antes había 10 valores distintos de letter-spacing en mono uppercase
     (0.06 / 0.08 / 0.10 / 0.12 / 0.14 / 0.15 / 0.16 / 0.18 / 0.20 / 0.22).
     Editorial-grade = 3 max. */
  --ls-mono-tight:  0.08em;  /* mono micro <0.7rem (densidad) */
  --ls-mono-base:   0.16em;  /* mono small 0.7-0.85rem (default) */
  --ls-mono-loose:  0.22em;  /* eyebrow ceremonial */

  /* =========================================
     Tipografía
     ========================================= */
  --font-display: 'Archivo', 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Archivo', 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* --font-mono fue RETIRADO (aliasaba a la sans = no-op; se borraron
     las 205 declaraciones que lo usaban). Donde importe alineación de
     números, usar font-variant-numeric: tabular-nums. */

  --fs-nano:  0.625rem;  /* 10px — SOLO eyebrows ceremoniales mono */
  --fs-micro: 0.72rem;
  --fs-xs:    0.82rem;
  --fs-sm:    0.92rem;
  --fs-base:  1rem;
  --fs-lg:    1.12rem;
  --fs-xl:    1.35rem;
  --fs-2xl:   1.75rem;
  --fs-3xl:   2.25rem;
  --fs-4xl:   3rem;
  --fs-hero:  clamp(3rem, 8.5vw, 6.5rem);
  --fs-mega:  clamp(4rem, 12vw, 9rem);

  /* =========================================
     Espaciado
     ========================================= */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-7:  2rem;
  --sp-8:  2.5rem;
  --sp-9:  3rem;
  --sp-10: 4rem;
  --sp-11: 5rem;
  --sp-12: 6rem;

  /* =========================================
     Radios — Compu.uy es BRUTALIST: bordes rectos como identidad.
     Default 0px en cards/buttons. Solo pills/badges usan radius full. */
  --rad-0:    0px;
  --rad-sm:   0px;       /* Cards/buttons/chips → rectos */
  --rad-md:   0px;       /* Containers → rectos */
  --rad-lg:   0px;       /* Hero / cards destacadas → rectos */
  --rad-pill: 999px;     /* Solo pills/badges circulares */

  /* =========================================
     Timings + easings
     ========================================= */
  --t-fast:      120ms;
  --t-base:      220ms;
  --t-slow:      360ms;
  --t-dramatic:  620ms;
  --ease-out:    cubic-bezier(0.2, 0.85, 0.25, 1);
  --ease-snap:   cubic-bezier(0.3, 0.9, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  /* =========================================
     Sombras + glows
     ========================================= */
  --shadow-sm: 0 2px 10px rgba(6, 15, 71, 0.25);
  --shadow-md: 0 8px 24px rgba(6, 15, 71, 0.30);
  --shadow-lg: 0 18px 50px rgba(6, 15, 71, 0.38);
  --glow-cyan:    0 0 24px rgba(62, 230, 230, 0.35);
  --glow-magenta: 0 6px 24px rgba(230, 50, 132, 0.42);

  /* =========================================
     Layout
     ========================================= */
  --max-content: 1450px;
  --max-text:    900px;                /* ancho angosto para páginas de texto (decisión jun 2026) */
  --page-max:    var(--max-content);   /* ancho del breadcrumb; cada screen lo overridea según su contenido */
  --app-px:      var(--sp-8);

  /* =========================================
     Z-INDEX — capas GLOBALES de página, una sola escala.
     Antes: 77 declaraciones con 23 valores distintos y 2 bugs
     (cookie-banner tapaba modales; modal de moneda bajo el drawer).
     Los micro z-index INTERNOS de componentes (0-10, stacking
     local dentro de cards/banners) no usan esta escala a propósito.
     ========================================= */
  --z-sticky:   50;    /* chrome pegajoso: header, promo-bar, progress, bottom-nav, wa-float */
  --z-dropdown: 100;   /* dropdowns del header, cats-drawer, cookie-banner */
  --z-drawer:   1000;  /* cart-drawer, sidebar de filtros mobile */
  --z-modal:    1100;  /* modales: location/auth/moneda, cuenta, abandoned-cart */
  --z-toast:    1200;  /* toast + tooltips flotantes (siempre visibles) */

  /* =========================================
     Colores de marca de terceros / semánticos sueltos
     ========================================= */
  --wa-green:      #25D366;  /* verde oficial WhatsApp */
  --builder-amber: #FFB347;  /* ámbar del builder (Armá tu PC) */
  --stock-green:   #28C882;  /* verde "en stock" de cards */
}

/* =========================================================
   LIGHT THEME (default) — premium tech retail
   Inspirado en B&H, Newegg, PCComponentes: bg neutral casi-blanco,
   chrome blanco puro, accents cyan oscuro + magenta saturado, sombras
   tintadas de azul para coherencia con la marca.
   ========================================================= */
[data-theme="light"] {
  /* Fondos — body más oscuro para que cards blancos resalten.
     Camila: 1.05:1 differential anterior era invisible; nuevo
     ratio ~1.12:1 cumple Material elevation guideline. */
  --bg:            #EEF1F8;             /* off-white tintado más definido */
  --bg-deep:       #FFFFFF;             /* chrome / sticky panels */
  --bg-elevated:   #FFFFFF;             /* cards */
  --bg-subtle:     #F6F8FC;             /* secciones banded sutiles */
  --bg-inverse:    var(--c-blue-950);

  /* Texto */
  --fg:            #0A1B6E;              /* blue-900: títulos, primary text */
  --fg-mute:       rgba(10, 27, 110, 0.72);
  --fg-dim:        rgba(10, 27, 110, 0.50);
  --fg-inverse:    var(--c-white);

  /* Líneas / borders */
  --line:          rgba(10, 27, 110, 0.08);
  --line-soft:     rgba(10, 27, 110, 0.04);
  --line-strong:   rgba(10, 27, 110, 0.22);

  /* Accent text en LIGHT theme = BRAND BLUE, no cyan oscuro.
     Sofía (brand designer) lo señaló: el cyan #066565 sobre blanco
     se ve "médico/pharma/dental clinic", NO tech retail. El brand blue
     #1E47E5 sí evoca tech y mantiene la identidad Compu. El cyan
     queda reservado a hovers, dots de carousel, accents decorativos
     puntuales (NO en text accent general). */
  --accent:        #1E47E5;
  --accent-text:   #1E47E5;
  --accent-text-dim: #4061D3;
  --accent-strong: #1A3DC9;
  --accent-soft:   #4061D3;
  /* Tint para hovers / fondos sutiles — usa BRAND BLUE, no cyan,
     porque cyan al 6-12% sobre blanco da un mint-green sucio
     ("verde asqueroso"). El brand blue queda azul agua, limpio. */
  --accent-tint:   rgba(30, 71, 229, 0.06);
  --accent-tint-strong: rgba(30, 71, 229, 0.12);

  /* Brand (azul Compu para CTAs / highlights — mantiene saturado) */
  --brand:         #1E47E5;
  --brand-soft:    color-mix(in srgb, #1E47E5 12%, transparent);

  /* Price — magenta-600 más oscuro para pasar WCAG AA sobre body.
     Antes #D6286F daba 4.39:1 (FALLABA AA normal). #B41F5F = 6.3:1. */
  --price:         #B41F5F;              /* mag-700 — pasa AA AAA sobre blanco */
  --price-strong:  #991852;

  /* Sombras tintadas de azul Compu — premium, coherente */
  --shadow-sm: 0 1px 2px rgba(10, 27, 110, 0.06), 0 1px 4px rgba(10, 27, 110, 0.04);
  --shadow-md: 0 4px 12px rgba(10, 27, 110, 0.08), 0 2px 6px rgba(10, 27, 110, 0.05);
  --shadow-lg: 0 12px 32px rgba(10, 27, 110, 0.12), 0 4px 12px rgba(10, 27, 110, 0.06);
  --shadow-xl: 0 24px 56px rgba(10, 27, 110, 0.16), 0 8px 24px rgba(10, 27, 110, 0.08);
  /* "Sombra de la casa" — card float sutil (antes hardcodeada en 4 lugares). */
  --shadow-card: 0 1px 2px rgba(10, 27, 110, 0.04), 0 6px 16px rgba(10, 27, 110, 0.05);

  /* Glows — más sutiles en light */
  --glow-cyan:    0 0 18px rgba(6, 101, 101, 0.18);
  --glow-magenta: 0 4px 18px rgba(214, 40, 111, 0.22);
}

/* DARK THEME override (opt-in via toggle). Reescribe los semánticos
   manteniendo la paleta cruda de blue/cyan/mag. */
[data-theme="dark"] {
  --bg:            #0A1330;
  --bg-deep:       #060B22;
  --bg-elevated:   #142048;
  --bg-subtle:     #0E1838;
  --bg-inverse:    var(--c-white);
  --fg:            var(--c-white);
  --fg-mute:       var(--c-white-80);
  --fg-dim:        var(--c-white-45);
  --fg-inverse:    var(--c-blue-900);
  --line:          var(--c-white-20);
  --line-soft:     var(--c-white-10);
  --line-strong:   var(--c-white-45);
  --accent:        var(--c-cyan-400);
  --accent-text:   var(--c-cyan-400);
  --accent-text-dim: var(--c-cyan-500);
  --accent-strong: var(--c-cyan-500);
  --accent-soft:   var(--c-cyan-300);
  --accent-tint:   color-mix(in srgb, var(--c-cyan-400) 12%, transparent);
  --brand:         var(--c-blue-600);
  --brand-soft:    color-mix(in srgb, var(--c-blue-600) 18%, transparent);
  --price:         var(--c-mag-500);
  --price-strong:  var(--c-mag-600);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.40);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.65);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 16px rgba(0, 0, 0, 0.45);
  --glow-cyan:    0 0 24px rgba(62, 230, 230, 0.35);
  --glow-magenta: 0 6px 24px rgba(230, 50, 132, 0.42);
  /* Semantic colors en dark: brillantes para mantener contraste */
  --success:        #34D399;
  --success-text:   #A7F3D0;
  --success-soft:   rgba(52, 211, 153, 0.16);
  --warning:        #FBBF24;
  --warning-text:   #FDE68A;
  --warning-soft:   rgba(251, 191, 36, 0.16);
  --error:          #F87171;
  --error-text:     #FCA5A5;
  --error-soft:     rgba(248, 113, 113, 0.14);
  --info:           var(--c-cyan-400);
  --info-soft:      rgba(62, 230, 230, 0.12);
}

@media (max-width: 760px) {
  :root { --app-px: var(--sp-3); }
}