/* ============================================================
   tokens.css — sistema de diseno de Shopeable
   FUENTE DE VERDAD UNICA. La maqueta importa este archivo;
   no redefine color, tipografia ni espaciado en ningun lado.

   Los ratios de contraste son MEDIDOS (tools/check_contrast.py),
   no estimados. Correr `py tools/check_contrast.py` despues de
   tocar cualquier color.
   ============================================================ */

:root {
  /* --- Espaciado (base 4px) --- */
  --sp-1: 0.25rem;   /*  4px */
  --sp-2: 0.5rem;    /*  8px */
  --sp-3: 0.75rem;   /* 12px */
  --sp-4: 1rem;      /* 16px */
  --sp-5: 1.5rem;    /* 24px */
  --sp-6: 2rem;      /* 32px */
  --sp-7: 3rem;      /* 48px */
  --sp-8: 4.5rem;    /* 72px */
  --sp-9: 6rem;      /* 96px */

  /* --- Radios --- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pill: 999px;

  /* --- Escala tipografica (ratio 1.2) --- */
  --fs--1: 0.833rem;
  --fs-0:  1rem;
  --fs-1:  1.2rem;
  --fs-2:  1.44rem;
  --fs-3:  1.728rem;
  --fs-4:  2.074rem;
  --fs-5:  2.488rem;

  /* --- Familias ---
     La serif vive SOLO en --ff-verdict. El veredicto es la unica
     excepcion editorial del sistema (spec 4.2); si la serif se
     empieza a usar en otros lados, esa distincion se pierde. */
  --ff-sans:    'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-display: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-verdict: 'Space Grotesk', Georgia, 'Times New Roman', serif;
  --ff-mono:    'Space Mono', ui-monospace, Consolas, monospace;

  /* --- Movimiento --- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 180ms;

  /* --- Layout --- */
  --measure: 68ch;
  --wrap: 1180px;

  color-scheme: light dark;

  /* ==========================================================
     TEMA CLARO (default)
     ========================================================== */
  --bg:         #FFFDF7;
  --bg-elev:    #FFFFFF;
  --bg-sunken:  #F7F4E9;
  /* Superficie translucida para cabeceras pegajosas con blur detras.
     Tiene que existir por tema: una cabecera blanca fija sobre un fondo
     oscuro se ve como una franja rota. */
  --bg-elev-blur: rgba(255, 255, 255, 0.88);

  --fg:         #12313B;  /* 13.74:1 sobre blanco · 13.63:1 sobre --bg  AA */
  --fg-muted:   #46636A;  /*  6.46:1 sobre blanco ·  6.41:1 sobre --bg  AA */
  --fg-faint:   #557179;  /*  5.35:1 sobre blanco  AA */

  --accent:       #B85609;  /* 4.80:1 sobre blanco · 4.76:1 sobre --bg  AA */
  --accent-solid: #B85609;  /* fondo del boton de compra */
  --accent-ink:   #FFFFFF;  /* 4.80:1 sobre --accent-solid  AA
                               OJO: en claro es BLANCO. El acento naranja
                               oscuro pide tinta clara. El nombre sigue
                               significando "texto sobre el acento". */
  --accent-wash:  #FFF3E2;

  /* El veredicto se distingue por temperatura opuesta al acento (verde
     azulado contra naranja), para separar OPINION de EVIDENCIA */
  --verdict-accent:       #187B70;  /* 5.11:1 sobre blanco  AA */
  --verdict-accent-solid: #87C8B6;  /* barra decorativa de 4px, NUNCA texto
                                       (1.95:1 sobre blanco, reprobaria) */

  --line:        #D3E2E3;
  --line-strong: #A9C1BE;

  --store-ml:      #7A5C00;  /* 6.25:1 sobre blanco  AA. Dorado oscuro, familia
                                del amarillo de marca de MercadoLibre (#FFE600):
                                ese reprueba como texto/badge (muy claro), este
                                es lo mas cerca que pasa AA con tinta blanca. */
  --store-ml-fg:   #FFFFFF;  /* 6.25:1 sobre --store-ml  AA */
  --store-ml-wash: #FBF3D9;
  --store-az:      #AD4E00;  /* 5.43:1 sobre blanco  AA. Familia del naranja de
                                marca de Amazon (#FF9900): ese da 2.75:1 con
                                tinta blanca y reprueba (ver --brand-az para el
                                tono real, solo decorativo). */
  --store-az-fg:   #FFFFFF;  /* 5.43:1 sobre --store-az  AA */
  --store-az-wash: #FFF1E0;

  /* --- Insignia de tienda (pill solida: .badge[data-store]) ---
     Fijas en los dos temas a proposito, igual que --band-dark/--brand-*:
     son identidad de marca, no una superficie que deba invertirse con el
     toggle. Antes cada pill usaba --store-ml/--store-az (arriba), pensados
     para texto sobre fondo claro -- reprobaban AA con tinta oscura sobre
     el amarillo real de marca, asi que se resolvio con tinta BLANCA sobre
     un dorado oscurecido. Eso hacia que la pill de MercadoLibre no se
     viera como su amarillo real en ningun lado del sitio, e inconsistente
     con la excepcion que ya existia solo en la tabla comparativa
     (negro/blanco para Amazon, amarillo/tinta oscura para MercadoLibre).
     Generalizada aqui: reportado por el usuario 2026-08-25. */
  --store-ml-badge-bg: #FFD032;  /* = --brand-ml, amarillo real de marca */
  --store-ml-badge-fg: #12313B;  /* 11.86:1 sobre --store-ml-badge-bg  AA */
  --store-az-badge-bg: #000000;
  --store-az-badge-fg: #FFFFFF;  /* 21:1 sobre --store-az-badge-bg  AA */

  --ok:   #187B70;
  --warn: #E98121;
  --bad:  #A8352A;  /* 6.55:1 sobre blanco  AA */

  /* --- Bandas oscuras ---
     Secciones oscuras DENTRO de una pagina clara (hero, CTA, pie).
     NO se redefinen en el tema oscuro a proposito: son un elemento de
     marca, no una superficie del tema. Si usaran --bg/--bg-elev se
     voltearian con el toggle y la banda desapareceria. */
  --band-dark:          #12313B;
  --band-dark-2:        #0B242C;
  --band-dark-fg:       #F7F4E9;  /* 12.51:1 sobre --band-dark · 14.68:1 sobre --band-dark-2  AA */
  --band-dark-fg-muted: #A9C1BE;  /*  7.23:1 sobre --band-dark ·  8.49:1 sobre --band-dark-2  AA */
  --band-dark-ok:       #5BB98C;  /*  5.73:1 sobre --band-dark  AA
                                     Palomita de los badges del banner. No puede
                                     ser --ok: en tema claro es #187B70 y sobre
                                     la banda oscura daria 1.9:1. */

  /* --- Banner de dos tiendas ---
     Las tarjetitas del dibujo son superficies fijas dentro de la banda
     oscura, por eso viven aqui y NO se redefinen en el tema oscuro. Los
     dos --brand-* son los colores REALES de cada tienda y se usan solo en
     barras decorativas, nunca detras de texto: como identidad de marca no
     se pueden oscurecer, y como no llevan texto encima no aplica AA. */
  --store-card-ml-bg: #FFFFFF;
  --store-card-ml-fg: #12313B;  /* 13.74:1 sobre --store-card-ml-bg  AA */
  --store-card-az-bg: #273648;
  --store-card-az-fg: #F7F4E9;  /* 11.17:1 sobre --store-card-az-bg  AA */
  --brand-ml: #FFD032;
  --brand-az: #FF9900;

  --shadow-1: rgba(0, 0, 0, 0.15) 0px 2px 8px 0px;
  --shadow-2: rgba(18, 49, 59, 0.16) 0px 13px 10px 0px;
  --shadow-3: rgba(18, 49, 59, 0.23) 0px 24px 55px 0px;

  /* --- Paleta de la tabla comparativa (hasta 5 productos) ---
     SOLO uso decorativo: relleno de barra y trazo del aro de puntaje.
     NUNCA como color de texto — --comp-2 y --comp-4 no pasan AA como
     texto (heredados del experimento paleta-cotelo.css, sin verificar
     ahi). El numero dentro del circulo usa --fg, no estos tokens. */
  --comp-1: #187B70;
  --comp-2: #E98121;
  --comp-3: #6B5B95;
  --comp-4: #F4A460;
  --comp-5: #E8547A;

  /* --- Fondo del hero ---
     Lavado decorativo verde -> crema. Los stops NO son los del mockup
     (#EAF3EF / #FCEFE0): sobre esos, --accent-solid caia a 4.24:1 y
     .hero__kicker-word (0.85rem, peso 700 = texto normal para WCAG)
     reprobaba AA. Aclarados hasta que el peor stop da 4.56:1.
     Medido con el mismo metodo que check_contrast.py. */
  --hero-grad: linear-gradient(135deg, #F6FAF8 0%, #FFFDF7 45%, #FDF9F4 100%);
}

/* ============================================================
   TEMA OSCURO — alternativo, se elige con el toggle
   ============================================================ */
:root[data-theme='dark'] {
  /* Paleta oscura armada sobre --band-dark/--band-dark-2 del tema claro
     (el navy que ya usa el banner de dos tiendas) en vez del azul-negro
     original del proyecto — para que el modo oscuro se sienta parte de
     la misma paleta calida naranja/crema y no vuelva a un tema distinto
     al cambiar el toggle. Contraste verificado con
     tools/check_contrast.py, no a ojo. */
  --bg:         #0B242C;  /* = --band-dark-2 del tema claro */
  --bg-elev:    #12313B;  /* = --band-dark del tema claro */
  --bg-sunken:  #071920;
  --bg-elev-blur: rgba(18, 49, 59, 0.88);

  --fg:         #F7F4E9;  /* = --bg del tema claro (crema), reusado como texto. 14.64:1 sobre --bg · 12.48:1 sobre --bg-elev  AA */
  --fg-muted:   #A9C1BE;  /*  8.49:1 sobre --bg ·  7.24:1 sobre --bg-elev  AA */
  --fg-faint:   #8AA5AB;  /*  6.18:1 sobre --bg  AA */

  /* Acento mas claro que el naranja del tema claro (#B85609): ese valor
     da 3.36:1 como texto sobre este fondo oscuro, reprueba AA. #E07D25
     si pasa (5.47:1), y con tinta OSCURA encima (no blanca) tambien pasa
     como fondo de boton — mismo patron que ya usaba el tema oscuro
     original con su azul (tinta oscura sobre acento claro). */
  --accent:       #E07D25;  /* 5.47:1 sobre --bg · 4.67:1 sobre --bg-elev  AA */
  --accent-solid: #E07D25;
  --accent-ink:   #0B242C;  /* 5.47:1 sobre --accent-solid  AA */
  --accent-wash:  rgba(224, 125, 37, 0.14);

  /* Verde-azulado, temperatura opuesta al naranja — mismo principio que
     el tema claro (veredicto = OPINION, se distingue del acento que
     marca precio/CTA). Distinto de --store-ml para no duplicar color
     entre el badge de ML y el veredicto. */
  --verdict-accent:       #4FB894;  /* 6.61:1 sobre --bg · 5.64:1 sobre --bg-elev  AA */
  --verdict-accent-solid: #4FB894;

  --line:        rgba(247, 244, 233, 0.14);
  --line-strong: rgba(247, 244, 233, 0.26);

  --store-ml:      #E8C547;  /* 9.60:1 sobre --bg  AA. Dorado brillante, familia
                                del amarillo de marca de MercadoLibre -- en
                                oscuro hay margen para ir mas cerca de la marca
                                real que en claro. */
  --store-ml-fg:   #0B242C;  /* 9.60:1 sobre --store-ml  AA */
  --store-ml-wash: rgba(232, 197, 71, 0.14);
  --store-az:      #E8935A;  /* 6.72:1 sobre --bg  AA. Familia del naranja de
                                marca de Amazon. */
  --store-az-fg:   #0B242C;  /* 6.72:1 sobre --store-az  AA */
  --store-az-wash: rgba(232, 147, 90, 0.14);

  --ok:   #5BB98C;
  --warn: #E8A33D;
  --bad:  #E8836B;

  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.28);
  --shadow-2: 0 8px 32px rgba(0,0,0,.45);
  --shadow-3: 0 20px 60px rgba(0,0,0,.55);

  /* Version aclarada para que se distingan sobre fondo oscuro; sigue
     siendo solo decorativa (bar/aro), nunca texto. */
  --comp-1: #5BB98C;
  --comp-2: #F0A050;
  --comp-3: #9B8BC4;
  --comp-4: #F7C08A;
  --comp-5: #F08CA3;

  /* El gradiente del hero TIENE que voltearse con el tema. El del mockup
     es claro fijo; sobre el, --fg oscuro daria ~1.1:1. Version oscura
     de la misma familia navy, con un toque calido en el stop final. */
  --hero-grad: linear-gradient(135deg, #12313B 0%, #0B242C 45%, #16241A 100%);
}

/* Si el sistema pide oscuro y el usuario no ha elegido tema, usamos oscuro.
   Los valores se repiten porque una media query no puede "heredar" de un
   selector de atributo. Al cambiar el tema oscuro de arriba, cambiar aqui
   tambien — check_contrast.py NO verifica este bloque. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg:         #0B242C;
    --bg-elev:    #12313B;
    --bg-sunken:  #071920;
    --bg-elev-blur: rgba(18, 49, 53, 0.88);
    --fg:         #F7F4E9;
    --fg-muted:   #A9C1BE;
    --fg-faint:   #8AA5AB;
    --accent:       #E07D25;
    --accent-solid: #E07D25;
    --accent-ink:   #0B242C;
    --accent-wash:  rgba(224, 125, 37, 0.14);
    --verdict-accent:       #4FB894;
    --verdict-accent-solid: #4FB894;
    --line:        rgba(247, 244, 233, 0.14);
    --line-strong: rgba(247, 244, 233, 0.26);
    --store-ml:      #E8C547;
    --store-ml-fg:   #0B242C;
    --store-ml-wash: rgba(232, 197, 71, 0.14);
    --store-az:      #E8935A;
    --store-az-fg:   #0B242C;
    --store-az-wash: rgba(232, 147, 90, 0.14);
    --ok:   #5BB98C;
    --warn: #E8A33D;
    --bad:  #E8836B;
    --comp-1: #5BB98C;
    --comp-2: #F0A050;
    --comp-3: #9B8BC4;
    --comp-4: #F7C08A;
    --comp-5: #F08CA3;
    --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.28);
    --shadow-2: 0 8px 32px rgba(0,0,0,.45);
    --shadow-3: 0 20px 60px rgba(0,0,0,.55);
    --hero-grad: linear-gradient(135deg, #12313B 0%, #0B242C 45%, #16241A 100%);
  }
}