/* =========================================================================
   TOKENS DE DISEÑO
   =========================================================================
   Son los valores de fábrica. El panel de administración sobrescribe un
   subconjunto chico de estos por tienda, emitiendo un bloque :root propio.

   PRINCIPIO RECTOR
   El armazón del sitio es neutro y FIJO. El color de marca es un acento que
   pinta botones, enlaces, estados y detalles. Si la marca tiñera cuarenta
   superficies, cambiar un color obligaría a reequilibrar el sitio entero y
   cada tienda nueva sería un rediseño.

   QUÉ CONFIGURA EL COMERCIANTE
   Marca, acento de oferta, radios, tipografía, proporción de foto y densidad.

   QUÉ NO
   La rampa neutra, los colores de éxito y error, todos los colores de texto
   (se derivan), y el color del precio. Un error en verde es un error. Y el
   precio es el dato más importante de la página: tiene que leerse siempre,
   elija lo que elija el comerciante.
   ========================================================================= */

:root {
  /* ---------- Rampa neutra. FIJA. ----------
     Levemente fría, para que combine con cualquier matiz de marca sin producir
     un choque entre cálidos y fríos. */
  --tk-n-0:   #FFFFFF;
  --tk-n-25:  #FCFCFD;
  --tk-n-50:  #F9FAFB;
  --tk-n-100: #F2F4F7;
  --tk-n-200: #E4E7EC;
  --tk-n-300: #D0D5DD;
  --tk-n-400: #98A2B3;
  --tk-n-500: #667085;
  --tk-n-600: #475467;
  --tk-n-700: #344054;
  --tk-n-800: #1D2939;
  --tk-n-900: #101828;
  --tk-n-950: #0C111D;

  /* ---------- Marca. CONFIGURABLE. ----------
     Punto de partida: teal profundo. Contraste 5,58:1 sobre blanco, aprueba el
     nivel AA. No es ninguno de los cuatro azules que convivían antes, no es el
     azul por defecto de Bootstrap, y funciona igual para una tienda infantil
     que para una ferretería. Es un punto de partida, no una identidad. */
  --tk-brand-50:  #ECFDFF;
  --tk-brand-100: #CFF9FE;
  --tk-brand-200: #A5F0FC;
  --tk-brand-300: #67E3F9;
  --tk-brand-400: #22CCEE;
  --tk-brand-500: #06AED4;
  --tk-brand-600: #088AB2;
  --tk-brand-700: #0B7285;
  --tk-brand-800: #0E5A6B;
  --tk-brand-900: #104853;

  --tk-primary:        var(--tk-brand-700);
  --tk-primary-rgb:    11, 114, 133;
  --tk-primary-hover:  var(--tk-brand-800);
  --tk-primary-active: var(--tk-brand-900);
  --tk-primary-subtle: var(--tk-brand-50);
  --tk-primary-border: var(--tk-brand-200);
  --tk-on-primary:     #FFFFFF;              /* DERIVADO: texto SOBRE el primario */
  --tk-primary-ink:    var(--tk-brand-700);  /* DERIVADO: primario COMO texto */

  /* ---------- Superficies ---------- */
  --tk-surface:         var(--tk-n-0);
  --tk-surface-raised:  var(--tk-n-0);
  --tk-surface-sunken:  var(--tk-n-50);
  --tk-surface-inset:   var(--tk-n-100);
  --tk-surface-inverse: var(--tk-n-900);

  /* ---------- Texto. Todos derivados, ninguno configurable. ---------- */
  --tk-text-strong:   var(--tk-n-900);
  --tk-text:          var(--tk-n-700);
  --tk-text-muted:    var(--tk-n-500);
  --tk-text-disabled: var(--tk-n-400);
  --tk-text-inverse:  var(--tk-n-0);

  /* ---------- Bordes y foco ---------- */
  --tk-border:        var(--tk-n-200);
  --tk-border-strong: var(--tk-n-300);
  --tk-focus-ring:    var(--tk-brand-600);
  --tk-focus-width:   2px;

  /* ---------- Estado. FIJOS: son convención universal. ---------- */
  --tk-success:        #15803D;
  --tk-success-subtle: #F0FDF4;
  --tk-success-border: #BBF7D0;
  --tk-warning:        #B54708;
  --tk-warning-subtle: #FFFAEB;
  --tk-warning-border: #FEDF89;
  --tk-danger:         #B42318;
  --tk-danger-subtle:  #FEF3F2;
  --tk-danger-border:  #FECDCA;
  --tk-on-success:     #FFFFFF;   /* DERIVADO del color de estado, no configurable */
  --tk-on-danger:      #FFFFFF;
  --tk-on-warning:     #FFFFFF;
  --tk-info:           var(--tk-brand-700);
  --tk-info-subtle:    var(--tk-brand-50);

  /* ---------- Comercio ---------- */
  --tk-price:      var(--tk-text-strong);   /* FIJO. Nunca el color de marca. */
  --tk-price-old:  var(--tk-text-muted);
  --tk-sale:       var(--tk-success);       /* configurable con validación */
  --tk-sale-subtle:var(--tk-success-subtle);
  --tk-on-sale:    #FFFFFF;
  --tk-stock-ok:   var(--tk-success);
  --tk-stock-low:  var(--tk-warning);
  --tk-stock-out:  var(--tk-text-muted);

  /* ---------- Relleno de foto de producto ----------
     FIJO en ambos temas. En modo oscuro, una foto sobre fondo blanco se
     convierte en un rectángulo que encandila; mantener el relleno claro y
     sumarle un borde integra la imagen sin falsear el producto. */
  --tk-image-pad: #F2F4F7;

  /* ---------- Tipografía ---------- */
  --tk-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tk-font-heading: var(--tk-font-body);
  --tk-font-mono:    ui-monospace, "SF Mono", Menlo, monospace;

  --tk-fs-3xs:  11px;
  --tk-fs-2xs:  12px;
  --tk-fs-xs:   13px;
  --tk-fs-sm:   14px;
  --tk-fs-base: 16px;
  --tk-fs-md:   18px;
  --tk-fs-lg:   20px;
  --tk-fs-xl:   24px;
  --tk-fs-2xl:  30px;
  --tk-fs-3xl:  36px;
  --tk-fs-4xl:  44px;

  --tk-lh-tight: 1.25;
  --tk-lh-base:  1.55;
  --tk-tracking-heading: -0.02em;

  /* Pesos permitidos: 400, 500, 600, 700.
     Nada por debajo de 400: se vuelve ilegible en pantallas económicas, que son
     la mayoría del tráfico. Nada por encima de 700: rompe las métricas. */
  --tk-weight-normal: 400;
  --tk-weight-medium: 500;
  --tk-weight-semi:   600;
  --tk-weight-bold:   700;

  /* ---------- Espaciado. Base 4. ---------- */
  --tk-sp-0:  0;
  --tk-sp-1:  4px;
  --tk-sp-2:  8px;
  --tk-sp-3:  12px;
  --tk-sp-4:  16px;
  --tk-sp-5:  20px;
  --tk-sp-6:  24px;
  --tk-sp-8:  32px;
  --tk-sp-10: 40px;
  --tk-sp-12: 48px;
  --tk-sp-16: 64px;
  --tk-sp-20: 80px;
  --tk-sp-24: 96px;

  /* ---------- Forma. CONFIGURABLE. ----------
     Tres personalidades cambian la temperatura del sitio sin tocar un color:
     sharp (2/3/4/6/8) para industrial, default, soft (6/10/16/22/28) para infantil. */
  --tk-radius-xs:   4px;
  --tk-radius-sm:   6px;
  --tk-radius-md:  10px;
  --tk-radius-lg:  14px;
  --tk-radius-xl:  20px;
  --tk-radius-pill: 999px;
  --tk-border-width: 1px;

  /* ---------- Elevación. Neutra siempre, nunca teñida de marca. ---------- */
  --tk-shadow-xs: 0 1px 2px rgba(16,24,40,.05);
  --tk-shadow-sm: 0 1px 3px rgba(16,24,40,.10), 0 1px 2px rgba(16,24,40,.06);
  --tk-shadow-md: 0 4px 8px -2px rgba(16,24,40,.10), 0 2px 4px -2px rgba(16,24,40,.06);
  --tk-shadow-lg: 0 12px 16px -4px rgba(16,24,40,.08), 0 4px 6px -2px rgba(16,24,40,.03);
  --tk-shadow-xl: 0 20px 24px -4px rgba(16,24,40,.08), 0 8px 8px -4px rgba(16,24,40,.03);

  /* ---------- Layout ---------- */
  --tk-container-max: 1200px;
  --tk-gutter:        16px;
  --tk-header-height: 72px;

  /* ---------- Catálogo. CONFIGURABLE por rubro. ----------
     Ropa quiere retrato, ferretería cuadrado, muebles apaisado.
     Es el token que hace tangible el multi-rubro. */
  --tk-product-aspect: 1 / 1;

  /* ---------- Movimiento ---------- */
  --tk-dur-fast: 120ms;
  --tk-dur-base: 200ms;
  --tk-dur-slow: 300ms;
  --tk-ease-out: cubic-bezier(.2, 0, 0, 1);
  --tk-ease-both: cubic-bezier(.4, 0, .2, 1);

  --tk-scrim: rgba(12,17,29,.55);
}

/* =========================================================================
   MODO OSCURO
   Se deriva de las mismas semillas. El comerciante no autora nada aparte.
   ========================================================================= */
:root[data-bs-theme="dark"] {
  --tk-surface:         var(--tk-n-950);
  --tk-surface-raised:  var(--tk-n-900);
  --tk-surface-sunken:  #080C14;
  --tk-surface-inset:   var(--tk-n-800);
  --tk-surface-inverse: var(--tk-n-100);

  --tk-text-strong:   var(--tk-n-50);
  --tk-text:          var(--tk-n-300);
  --tk-text-muted:    var(--tk-n-400);
  --tk-text-disabled: var(--tk-n-600);
  --tk-text-inverse:  var(--tk-n-900);

  --tk-border:        var(--tk-n-800);
  --tk-border-strong: var(--tk-n-700);

  /*
   * EL PRIMARIO EN OSCURO LO COMPILA EL TEMA, NO ESTE ARCHIVO.
   *
   * Acá había un bloque que redefinía `--tk-primary` y compañía a partir de la
   * rampa de fábrica. Como `:root[data-bs-theme="dark"]` tiene más especificidad
   * que el `:root` que emite el tema compilado, GANABA SIEMPRE: cualquier
   * visitante con el sistema operativo en modo oscuro veía todas las tiendas del
   * mismo celeste, sin importar qué color hubiera elegido el comerciante. La
   * ferretería azul, la indumentaria casi negra y la tienda rosa se veían las
   * tres iguales, y la identidad se perdía sin que nadie del negocio lo decidiera.
   *
   * Ahora `ThemeService::compilar()` emite DOS bloques desde la misma semilla,
   * uno por modo, y las dos paletas salen del color que eligió el comerciante.
   * Estos valores quedan sólo como respaldo para cuando todavía no hay tema
   * publicado, y por eso van con la rampa y no con un color escrito a mano.
   */
  --tk-primary:        var(--tk-brand-500);
  --tk-primary-hover:  var(--tk-brand-400);
  --tk-primary-active: var(--tk-brand-300);
  --tk-primary-subtle: color-mix(in oklab, var(--tk-brand-500) 16%, var(--tk-n-950));
  --tk-primary-border: color-mix(in oklab, var(--tk-brand-500) 34%, var(--tk-n-950));
  --tk-primary-ink:    var(--tk-brand-300);
  --tk-on-primary:     var(--tk-n-950);   /* sobre el 500 gana el texto oscuro */

  --tk-success:        #4ADE80;
  --tk-success-subtle: #0B2417;
  --tk-success-border: #166534;
  --tk-warning:        #FBBF24;
  --tk-warning-subtle: #2A1A05;
  --tk-warning-border: #92400E;
  --tk-danger:         #FB7185;
  --tk-danger-subtle:  #2A0E12;
  --tk-danger-border:  #9F1239;
  --tk-on-success:     var(--tk-n-950);
  --tk-on-danger:      var(--tk-n-950);
  --tk-on-warning:     var(--tk-n-950);

  --tk-price: var(--tk-n-50);

  /* En modo oscuro las sombras no se ven: la elevación se comunica con bordes. */
  --tk-shadow-xs: 0 0 0 1px var(--tk-border);
  --tk-shadow-sm: 0 0 0 1px var(--tk-border);
  --tk-shadow-md: 0 0 0 1px var(--tk-border-strong);
  --tk-shadow-lg: 0 0 0 1px var(--tk-border-strong);
  --tk-shadow-xl: 0 0 0 1px var(--tk-border-strong);

  --tk-scrim: rgba(0,0,0,.7);
}

/* Cuando el visitante no eligió tema, se respeta la preferencia del sistema. */
@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]) {
    color-scheme: dark;
  }
}