/* =====================================================================
   BUYAR — Design tokens
   Sistema de marca única. Todos los productos de Buyar consumen este
   archivo y solo redefinen --acento / --acento-oscuro / --acento-suave.
   Ver docs/sistema-de-marca.md
   ===================================================================== */

/* ---------- Tipografía ----------
   Space Grotesk es la tipografía de Buyar. Cargarla desde Google Fonts:
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap">
*/

:root {
  /* --- Constantes de marca (NO se tocan por producto) --- */
  --buyar-noche:   #000722;  /* azul noche: el color de Buyar */
  --buyar-azul:    #075985;  /* azul acero: acento de la matriz */

  --fuente:        "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --fuente-datos:  "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  /* Escala tipográfica */
  --txt-xs:   0.75rem;
  --txt-sm:   0.875rem;
  --txt-base: 1rem;
  --txt-lg:   1.125rem;
  --txt-xl:   1.375rem;
  --txt-2xl:  1.75rem;
  --txt-3xl:  2.25rem;
  --txt-4xl:  3rem;

  /* Radios: tres, y nada más */
  --radio-control: 8px;
  --radio-tarjeta: 12px;
  --radio-chip:    999px;

  /* Espaciado */
  --esp-1: 4px;  --esp-2: 8px;  --esp-3: 12px; --esp-4: 16px;
  --esp-5: 24px; --esp-6: 32px; --esp-7: 48px; --esp-8: 72px;

  /* Sombras: dos niveles, no más */
  --sombra:      0 1px 2px rgba(0, 7, 34, .06), 0 8px 24px -16px rgba(0, 7, 34, .30);
  --sombra-alta: 0 2px 6px rgba(0, 7, 34, .08), 0 20px 48px -24px rgba(0, 7, 34, .40);

  /* --- Acento: lo ÚNICO que cada producto redefine ---
     REGLA: --acento es el color de marca del producto y NO SE CAMBIA.
     Si ese color no da contraste sobre fondo claro (pasa con los acentos
     claros, como el celeste de MostraloWeb o el oro de Hivault), para texto,
     enlaces e íconos chicos se usa --acento-texto, que es su variante legible.
     Nunca al revés: no se oscurece la marca para que "entre" en un botón. */
  --acento:        var(--buyar-azul);  /* relleno, barras, el color de la marca */
  --acento-texto:  #05436A;            /* texto/enlaces/íconos sobre fondo claro (AA) */
  --acento-oscuro: #05436A;            /* hover y estados presionados */
  --acento-suave:  #E8F0F6;            /* fondo tenue */

  /* --- Superficies y texto (tema claro) --- */
  --ground:     #F7F8FA;
  --surface:    #FFFFFF;
  --surface-2:  #F1F3F6;
  --ink:        #101828;
  --ink-soft:   #4A5567;
  --ink-faint:  #7D8798;
  --rule:       #DEE3EA;
  --rule-soft:  #EBEEF3;

  /* --- Escenario oscuro (headers, pantallas, CTA) --- */
  --stage:      var(--buyar-noche);
  --stage-ink:  #EEF1F6;
  --stage-soft: #97A0B0;

  /* --- Semánticos: NUNCA son el acento --- */
  --ok:      #16794C;  --ok-bg:      #E3F2EA;
  --warn:    #8A5B0F;  --warn-bg:    #F7EDDA;
  --danger:  #B4231D;  --danger-bg:  #F8E6E4;
  --info:    #1B5E92;  --info-bg:    #E6EFF7;
}

/* Tema oscuro: por preferencia del sistema, salvo elección explícita de claro */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:     #0C1017;
    --surface:    #151A23;
    --surface-2:  #1D2430;
    --ink:        #E8ECF3;
    --ink-soft:   #A6B0C0;
    --ink-faint:  #78838F;
    --rule:       #28303C;
    --rule-soft:  #1F2731;

    --stage:      #060A16;
    --stage-ink:  #EEF1F6;
    --stage-soft: #8F98A8;

    --ok:      #6EC79A;  --ok-bg:      #12241B;
    --warn:    #D9AC63;  --warn-bg:    #291F12;
    --danger:  #E48A84;  --danger-bg:  #2A1615;
    --info:    #7FB2DA;  --info-bg:    #12212E;

    --sombra:      0 1px 2px rgba(0, 0, 0, .45), 0 8px 24px -16px rgba(0, 0, 0, .85);
    --sombra-alta: 0 2px 6px rgba(0, 0, 0, .55), 0 20px 48px -24px rgba(0, 0, 0, .95);
  }
}

/* Elección explícita de tema oscuro */
:root[data-theme="dark"] {
  --ground:     #0C1017;
  --surface:    #151A23;
  --surface-2:  #1D2430;
  --ink:        #E8ECF3;
  --ink-soft:   #A6B0C0;
  --ink-faint:  #78838F;
  --rule:       #28303C;
  --rule-soft:  #1F2731;

  --stage:      #060A16;
  --stage-ink:  #EEF1F6;
  --stage-soft: #8F98A8;

  --ok:      #6EC79A;  --ok-bg:      #12241B;
  --warn:    #D9AC63;  --warn-bg:    #291F12;
  --danger:  #E48A84;  --danger-bg:  #2A1615;
  --info:    #7FB2DA;  --info-bg:    #12212E;

  --sombra:      0 1px 2px rgba(0, 0, 0, .45), 0 8px 24px -16px rgba(0, 0, 0, .85);
  --sombra-alta: 0 2px 6px rgba(0, 0, 0, .55), 0 20px 48px -24px rgba(0, 0, 0, .95);
}

/* =====================================================================
   ACENTOS POR PRODUCTO
   Se aplican poniendo la clase en <html> o <body>.

   --acento es el color de marca REAL de cada producto, tal como ya está
   construido. No se toca. Lo que se calibra es --acento-texto, para que
   el texto y los íconos sean legibles en todos por igual.
   ===================================================================== */

/* Celeste de la flecha del logo. Marca establecida: no se cambia. */
.buyar-mostraloweb {
  --acento: #2dc3e1; --acento-texto: #0A6C80;
  --acento-oscuro: #208cae; --acento-suave: #dff8ff;
}
/* Oro de Hivault. Marca establecida: no se cambia. */
.buyar-hivault {
  --acento: #e0a82e; --acento-texto: #8A650B;
  --acento-oscuro: #c4871f; --acento-suave: #faf0cd;
}
/* Verde bóveda. Nuevo: antes usaba el default de Bootstrap. */
.buyar-lockar {
  --acento: #0F7B6C; --acento-texto: #0F7B6C;
  --acento-oscuro: #0B5C51; --acento-suave: #E2F2EF;
}
/* Carmesí de Turnar. Nuevo. */
.buyar-turnar {
  --acento: #C62B3E; --acento-texto: #C62B3E;
  --acento-oscuro: #8F1A2A; --acento-suave: #FAE9EB;
}

/* En fondo oscuro los acentos claros ya son legibles: --acento-texto vuelve
   a ser el color de marca, y los oscuros se aclaran para poder leerse. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .buyar-mostraloweb,
  :root:not([data-theme="light"]).buyar-mostraloweb { --acento-texto: #2dc3e1; --acento-suave: #10262C; }
  :root:not([data-theme="light"]) .buyar-hivault,
  :root:not([data-theme="light"]).buyar-hivault     { --acento-texto: #e0a82e; --acento-suave: #2A2210; }
  :root:not([data-theme="light"]) .buyar-lockar,
  :root:not([data-theme="light"]).buyar-lockar      { --acento: #2FA795; --acento-texto: #4FB8A6; --acento-suave: #0E2622; }
  :root:not([data-theme="light"]) .buyar-turnar,
  :root:not([data-theme="light"]).buyar-turnar      { --acento: #D8455A; --acento-texto: #E8606F; --acento-suave: #2B1418; }
}

:root[data-theme="dark"] .buyar-mostraloweb,
:root[data-theme="dark"].buyar-mostraloweb { --acento-texto: #2dc3e1; --acento-suave: #10262C; }
:root[data-theme="dark"] .buyar-hivault,
:root[data-theme="dark"].buyar-hivault     { --acento-texto: #e0a82e; --acento-suave: #2A2210; }
:root[data-theme="dark"] .buyar-lockar,
:root[data-theme="dark"].buyar-lockar      { --acento: #2FA795; --acento-texto: #4FB8A6; --acento-suave: #0E2622; }
:root[data-theme="dark"] .buyar-turnar,
:root[data-theme="dark"].buyar-turnar      { --acento: #D8455A; --acento-texto: #E8606F; --acento-suave: #2B1418; }

/* =====================================================================
   BASE
   ===================================================================== */

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--fuente);
  font-size: var(--txt-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.12; letter-spacing: -.025em; text-wrap: balance; }
h1 { font-size: var(--txt-4xl); }
h2 { font-size: var(--txt-3xl); }
h3 { font-size: var(--txt-xl); }
h4 { font-size: var(--txt-lg); letter-spacing: -.01em; }

.b-mono, .tabular { font-family: var(--fuente-datos); font-variant-numeric: tabular-nums; }

/* Es texto: usa --acento-texto, no el color de marca crudo. */
.b-eyebrow {
  font-size: var(--txt-xs); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--acento-texto);
}

/* Botones: sólido = principal, contorno = secundaria. No hay un tercer estilo. */
.b-btn {
  display: inline-flex; align-items: center; gap: var(--esp-2);
  font-family: var(--fuente); font-weight: 600; font-size: var(--txt-sm);
  padding: 10px 20px; border-radius: var(--radio-control);
  background: var(--acento); color: #fff; border: 1px solid var(--acento);
  text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s;
}
.b-btn:hover { background: var(--acento-oscuro); border-color: var(--acento-oscuro); }
.b-btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.b-btn--ghost:hover { background: var(--surface-2); border-color: var(--ink-faint); }

.b-card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radio-tarjeta); padding: var(--esp-5); box-shadow: var(--sombra);
}

.b-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--txt-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 9px; border-radius: var(--radio-chip); border: 1px solid currentColor;
}
.b-chip--ok     { color: var(--ok);     background: var(--ok-bg); }
.b-chip--warn   { color: var(--warn);   background: var(--warn-bg); }
.b-chip--danger { color: var(--danger); background: var(--danger-bg); }
.b-chip--info   { color: var(--info);   background: var(--info-bg); }

:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}