/*
Theme Name: Mily Glasses Child
Theme URI: https://milyglasses.com
Description: Tema hijo de Blocksy para Mily Glasses Vision — óptica en Bogotá.
Author: Juana González
Template: blocksy
Version: 1.0.0
Text Domain: milyglasses-child
*/

/* ============================================================
   TOKENS · Sistema de diseño Mily Glasses (Bloque A del brief)
   ============================================================ */
:root {
  --hueso:      #F7F4EF;  /* fondo de página */
  --superficie: #FFFFFF;  /* tarjetas, fichas, modales */
  --foto-bg:    #F0EBE4;  /* fondo detrás del producto recortado */
  --tinta:      #171514;  /* texto principal, botones primarios */
  --humo:       #6F6862;  /* texto secundario, descripciones */
  --linea:      #E4DED5;  /* bordes, separadores */
  --rosa:       #F5A3C2;  /* acento */
  --rosa-hondo: #B85C7F;  /* acento en texto y enlaces (contraste AA) */

  --fuente-display: "Fraunces", Georgia, serif;
  --fuente-cuerpo:  "Plus Jakarta Sans", system-ui, sans-serif;

  --radio: 4px;          /* radio de borde en tarjetas y botones */
  --contenedor: 1240px;  /* ancho máximo */
}

/* ============================================================
   BASE · color y tipografía de cuerpo
   ============================================================ */
body {
  background-color: var(--hueso);
  color: var(--tinta);
  font-family: var(--fuente-cuerpo);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   TITULARES · Fraunces, sentence case (nunca mayúsculas)
   opsz alto en tamaños grandes para ganar elegancia óptica
   ============================================================ */
h1, h2, h3, h4,
.entry-title,
.woocommerce-loop-product__title,
.product_title.entry-title {
  font-family: var(--fuente-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-transform: none;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 0, "WONK" 0;
}

h3, h4 { font-weight: 600; }

/* ============================================================
   ENLACES DE CONTENIDO · subrayado rosa solo en hover
   (limitado al contenido para no pisar el menú/footer de Blocksy)
   ============================================================ */
.entry-content a,
.wp-block-post-content a {
  color: var(--rosa-hondo);
  text-decoration: none;
  transition: color 200ms ease;
}
.entry-content a:hover,
.wp-block-post-content a:hover {
  text-decoration: underline;
  text-decoration-color: var(--rosa);
  text-underline-offset: 3px;
}

/* ============================================================
   FOCO DE TECLADO · accesibilidad (regla del brief)
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--rosa);
  outline-offset: 2px;
}

/* ============================================================
   FIRMA TIPOGRÁFICA · notación de medidas y etiquetas micro
   Uso: <span class="mg-micro">52□18-145</span>
   ============================================================ */
.mg-micro {
  font-family: var(--fuente-cuerpo);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--humo);
}

/* ============================================================
   MOVIMIENTO · respetar prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}