/* ============================================================================
   Kira Mundo Mascotas — Tokens de marca
   Fuente: "Manual de Marca e Identidad" (05 Paleta, 06 Tipografías).
   Este archivo es la única fuente de verdad de color y tipografía de la UI.
   No introducir colores fuera de la paleta: las variaciones se derivan con
   color-mix() a partir de los cuatro colores oficiales.
   ========================================================================== */

:root {
  /* --- Paleta oficial (05) ------------------------------------------------ */
  --kira-orange: #ff9b50; /* Naranja Kira */
  --kira-purple: #54236f; /* Morado Kira */
  --kira-white: #ffffff; /* Blanco */
  --kira-green: #8bc34a; /* Verde acento */

  /* --- Derivados (mezclas de la paleta, no colores nuevos) ---------------- */
  --kira-purple-dark: color-mix(in srgb, var(--kira-purple) 76%, black);
  --kira-purple-ink: color-mix(in srgb, var(--kira-purple) 86%, black);
  --kira-muted: color-mix(in srgb, var(--kira-purple) 72%, white);
  --kira-line: color-mix(in srgb, var(--kira-purple) 16%, white);
  --kira-orange-soft: color-mix(in srgb, var(--kira-orange) 18%, white);
  --kira-orange-mist: color-mix(in srgb, var(--kira-orange) 8%, white);
  --kira-cream: color-mix(in srgb, var(--kira-orange) 6%, white);
  --kira-lilac: color-mix(in srgb, var(--kira-purple) 8%, white);

  /* --- Tipografía (06) ---------------------------------------------------- */
  /* Agbalumo: display (logotipo y títulos grandes). Solo peso 400 y >= 24px. */
  --kira-font-display: 'Agbalumo', 'Raleway', system-ui, sans-serif;
  /* Raleway: toda la interfaz funcional (400/500/600/700). */
  --kira-font-body: 'Raleway', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* --- Forma y profundidad ------------------------------------------------- */
  --kira-radius: 22px;
  --kira-radius-md: 16px;
  --kira-radius-sm: 12px;
  --kira-shadow: 0 18px 40px rgba(84, 35, 111, 0.12);
  --kira-shadow-soft: 0 8px 20px rgba(84, 35, 111, 0.07);
}

/* ----------------------------------------------------------------------------
   Puente con las variables del contrato storefront.

   applyTheme() en app.js escribe --primary, --secondary, --bg y --font como
   estilos INLINE en <html>. Una declaración inline gana a cualquier hoja de
   estilos normal, por eso aquí se usa !important: la marca no debe depender de
   la config_apariencia del vendedor. Si se desactiva la capa (window.
   KIRA_FORCE_BRAND = false) el atributo data-brand desaparece y el storefront
   vuelve a obedecer al payload.
   -------------------------------------------------------------------------- */
html[data-brand='kira'] {
  --primary: var(--kira-purple) !important;
  --secondary: var(--kira-orange) !important;
  --bg: var(--kira-cream) !important;
  --font: 'Raleway' !important;

  --primary-dark: var(--kira-purple-dark) !important;
  --primary-soft: var(--kira-orange-soft) !important;
  --primary-line: var(--kira-line) !important;

  --text: var(--kira-purple-ink) !important;
  --muted: var(--kira-muted) !important;
  --border: var(--kira-line) !important;
  --radius: var(--kira-radius) !important;
  --shadow: var(--kira-shadow) !important;

  color-scheme: light;
}

html[data-brand='kira'] body {
  font-family: var(--kira-font-body);
  color: var(--kira-purple-ink);
  background-color: var(--kira-cream);
}

html[data-brand='kira'] ::selection {
  background: var(--kira-orange-soft);
  color: var(--kira-purple-ink);
}

/* Indicador de foco único para toda la tienda.
   Morado sobre superficies claras (11.4:1) y naranja sobre el pie morado (5.4:1):
   el naranja solo no alcanza 3:1 contra el crema, por eso no se usa ahí. */
html[data-brand='kira'] :focus-visible {
  outline: 3px solid var(--kira-purple);
  outline-offset: 2px;
}

html[data-brand='kira'] .site-footer :focus-visible {
  outline-color: var(--kira-orange);
}