/*
Theme Name: El Riojano
Theme URI: https://pasteleriaelriojano.com
Author: PreciseFuture SL
Author URI: https://precisefuture.com
Description: Tema custom de Pastelería El Riojano. WooCommerce + bloques nativos, sin page builders. Sigue la convención pf-wordpress (modular extremo, autosuficiencia de componentes).
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.2
License: Proprietary
License URI: https://precisefuture.com
Text Domain: pf-riojano
Tags: woocommerce, custom, monolingual, modular
*/

/* ============================================================
 * BRAND TOKENS
 * Origen: landing aprobada (2026-05-06) en S3 landing-pasteleriaelriojano-com.
 * Mantener sincronizado con extracted/brand/tokens.css del workspace.
 * ========================================================== */
:root {
  /* Marca
   *   accent        → dorado saturado para FONDOS grandes (secciones,
   *                   hero strips, banners, gradientes amplios). Es el
   *                   dorado prominente de la marca.
   *   accent-strong → dorado apagado para detalles pequeños donde no se
   *                   quiere sobrecargar: badges, focus rings, líneas
   *                   finas, hovers de texto. (El nombre "strong" se
   *                   mantiene por compatibilidad con consumos existentes
   *                   en templates/* — semánticamente es el accent
   *                   secundario / sutil de detalles.)
   */
  --pf-riojano-brand-primary:        #1f2069;
  --pf-riojano-brand-primary-dark:   #2a2a4a;
  --pf-riojano-brand-primary-soft:   #4a4a6a;
  --pf-riojano-brand-accent:         #e1b101;
  --pf-riojano-brand-accent-strong:  #d9bf73;

  /* Neutrales cálidos */
  --pf-riojano-neutral-cream:        #f5f0e6;
  --pf-riojano-neutral-white:        #ffffff;
  --pf-riojano-neutral-mute:         #8585a0;

  /* Tipografía
   *   display → títulos + CTAs/botones (Poppins)
   *   body    → texto corrido + UI (Open Sans)
   *   accent  → detalles editoriales puntuales (Playfair)
   */
  --pf-riojano-font-display:         'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --pf-riojano-font-body:            'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --pf-riojano-font-accent:          'Playfair Display', Georgia, 'Times New Roman', serif;

  /* Escala tipográfica */
  --pf-riojano-fs-xs:                0.8rem;
  --pf-riojano-fs-sm:                0.9rem;
  --pf-riojano-fs-base:              1rem;
  --pf-riojano-fs-md:                1.125rem;
  --pf-riojano-fs-lg:                1.4rem;
  --pf-riojano-fs-xl:                1.75rem;
  --pf-riojano-fs-2xl:               clamp(1.75rem, 5vw, 2.4rem);
  --pf-riojano-fs-3xl:               clamp(2.25rem, 6vw, 3.25rem);

  /* Espaciado (base 8px) */
  --pf-riojano-space-1:              4px;
  --pf-riojano-space-2:              8px;
  --pf-riojano-space-3:              16px;
  --pf-riojano-space-4:              24px;
  --pf-riojano-space-5:              32px;
  --pf-riojano-space-6:              48px;
  --pf-riojano-space-7:              64px;
  --pf-riojano-space-8:              96px;

  /* Layout */
  --pf-riojano-container-max:        1200px;
  --pf-riojano-content-max:          720px;
  --pf-riojano-radius-sm:            2px;
  --pf-riojano-radius-md:            4px;
  --pf-riojano-radius-lg:            8px;

  /* Padding lateral común (gutter) — escala suave del viewport:
   *   ≤ 320px ≈ 16px · 768px ≈ 23px · ≥ 1280px = 32px (top).
   * Lo consumen `.pf-riojano-container` y cualquier componente fixed/absolute
   * que quiera alinearse con el borde interior del container (header actions). */
  --pf-riojano-gutter:               clamp(16px, 2.4vw, 32px);

  /* Alto reservado para el header (fixed). Cada breakpoint del header
   * declara una altura efectiva; el <main> usa estos tokens para no
   * quedar tapado por el chrome. Páginas con hero anulan ese padding.
   * En mobile la topbar promo se oculta (su contenido vive dentro del
   * drawer), por eso el alto efectivo se reduce al bar puro. */
  --pf-riojano-header-h:             152px;  /* desktop: topbar 56 + bar 96 */
  --pf-riojano-header-h-mobile:      80px;   /* mobile:  solo bar */

  /* Sombras */
  --pf-riojano-shadow-card:          0 1px 0 rgba(31, 32, 105, 0.06),
                                     0 12px 40px rgba(31, 32, 105, 0.10);
  --pf-riojano-shadow-elevated:      0 4px 16px rgba(31, 32, 105, 0.14);

  /* Borde */
  --pf-riojano-border-soft:          1px solid rgba(31, 32, 105, 0.10);

  /* Transiciones */
  --pf-riojano-transition-fast:      120ms ease;
  --pf-riojano-transition-base:      200ms ease;

  /* Tokens de e-commerce (PDP, precio, CTAs).
   * Consumidos por templates/single-product y variation-selector. */
  --pf-riojano-price:                #e1b101;   /* dorado saturado del precio */
  --pf-riojano-cta-bg:               var(--pf-riojano-brand-primary);
  --pf-riojano-cta-fg:               var(--pf-riojano-neutral-white);
  --pf-riojano-cta-bg-hover:         #14154a;   /* navy más oscuro al hover */
  --pf-riojano-neutral-soft:         rgba(0, 0, 0, 0.05);  /* hover sutil (stepper, chips) */
}

/* Reservado para futuro modo oscuro. Se activa por config admin. */
:root[data-theme="dark"] {
  /* TBD */
}

/* ============================================================
 * BASE TIPOGRÁFICA Y RESET MÍNIMO
 * ========================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  /* Anchor links bajo header fixed: el navegador descuenta esta altura al
   * desplazarse a una sección, así el título no queda tapado por el chrome. */
  scroll-padding-top: var(--pf-riojano-header-h);
}
@media (max-width: 1080px) {
  html { scroll-padding-top: var(--pf-riojano-header-h-mobile); }
}

body {
  margin: 0;
  font-family: var(--pf-riojano-font-body);
  font-size: var(--pf-riojano-fs-base);
  line-height: 1.55;
  color: var(--pf-riojano-brand-primary);
  background: var(--pf-riojano-neutral-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Protección contra overflow horizontal: imágenes, carruseles, tablas WC
   * o cualquier hijo que exceda el viewport NO debe abrir un scroll lateral
   * en mobile. `clip` es preferible a `hidden` porque no crea contexto de
   * scroll (no rompe `position: sticky`). */
  overflow-x: clip;
}

h1, h2, h3, h4 {
  font-family: var(--pf-riojano-font-display);
  font-weight: 700;
  color: var(--pf-riojano-brand-primary);
  margin: 0 0 var(--pf-riojano-space-3);
  line-height: 1.2;
  /* Títulos largos (nombres de tarta + descripción) no rebosan en mobile. */
  overflow-wrap: anywhere;
}
h1 { font-size: var(--pf-riojano-fs-3xl); }
h2 { font-size: var(--pf-riojano-fs-2xl); }
h3 { font-size: var(--pf-riojano-fs-xl); }
h4 { font-size: var(--pf-riojano-fs-lg); }

p { margin: 0 0 var(--pf-riojano-space-3); }

a {
  color: var(--pf-riojano-brand-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--pf-riojano-transition-fast);
}
a:hover { color: var(--pf-riojano-brand-accent-strong); }

img { max-width: 100%; height: auto; display: block; }

/* Layout utilities (cuando se necesite global; lo específico va en cada styles.css) */
.pf-riojano-container {
  max-width: var(--pf-riojano-container-max);
  margin: 0 auto;
  padding: 0 var(--pf-riojano-gutter);
}
.pf-riojano-content {
  max-width: var(--pf-riojano-content-max);
  margin: 0 auto;
  padding: 0 var(--pf-riojano-gutter);
}