/* ============================================================
   PequesFelices · Design Tokens
   Listo para pegar en el tema hijo de WordPress.
   Versión producción · paleta Coral por defecto.
   ============================================================ */

:root {
  /* ── Colores · Ink (texto y bordes) ────────────────────── */
  --pf-ink-900: #1f1c19;          /* texto principal, titulares, bordes fuertes */
  --pf-ink-700: #4a4540;          /* texto secundario, párrafos */
  --pf-ink-500: #6f6962;          /* texto terciario, placeholders */
  --pf-ink-300: #b8b1a7;          /* deshabilitado */
  --pf-ink-100: #d6cec3;          /* divisores, bordes suaves */

  /* ── Colores · Superficies ─────────────────────────────── */
  --pf-paper:   #ffffff;          /* cards, inputs, contenedores principales */
  --pf-bg:      #fbf6ef;          /* fondo de página */
  --pf-canvas:  #ece6db;          /* superficies acentuadas neutras (admin, etc.) */

  /* ── Colores · Acento (marca) ──────────────────────────── */
  --pf-accent-600: #c45a2e;       /* hover/pressed */
  --pf-accent-500: #e07856;       /* acento principal · CTAs, links, ratings */
  --pf-accent-300: #f5a98b;       /* acentos suaves */
  --pf-accent-100: #ffe5d9;       /* fondos suaves de acento (tint) */
  --pf-accent-ink: #ffffff;       /* texto sobre acento */

  /* ── Colores · Funcionales ─────────────────────────────── */
  --pf-success-500: #2f8a5b;
  --pf-success-100: #d8efdf;
  --pf-warning-500: #d99624;
  --pf-warning-100: #fbeacb;
  --pf-danger-500:  #b94a35;
  --pf-danger-100:  #ffe5e0;
  --pf-info-500:    #4a7b8e;
  --pf-info-100:    #d9e8ee;

  /* ── Tipografía · Familias ─────────────────────────────── */
  --pf-font-display: 'Quicksand', 'Comfortaa', system-ui, sans-serif;
  --pf-font-body:    'Schibsted Grotesk', 'Manrope', system-ui, sans-serif;
  --pf-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── Tipografía · Escala (mobile-first) ────────────────── */
  --pf-text-xs:   11px;   /* microdata, badges */
  --pf-text-sm:   13px;   /* texto pequeño, descripciones */
  --pf-text-base: 15px;   /* body por defecto */
  --pf-text-lg:   17px;   /* lead, body destacado */
  --pf-text-xl:   20px;   /* H3 mobile */
  --pf-text-2xl:  24px;   /* H2 mobile */
  --pf-text-3xl:  28px;   /* H1 mobile */
  --pf-text-4xl:  36px;   /* H1 desktop */
  --pf-text-5xl:  48px;   /* hero H1 desktop */
  --pf-text-6xl:  56px;   /* hero XL */

  /* ── Tipografía · Pesos ───────────────────────────────── */
  --pf-fw-regular:  400;
  --pf-fw-medium:   500;
  --pf-fw-semibold: 600;
  --pf-fw-bold:     700;

  /* ── Tipografía · Line heights ────────────────────────── */
  --pf-lh-tight:   1.1;
  --pf-lh-snug:    1.25;
  --pf-lh-normal:  1.5;
  --pf-lh-relaxed: 1.65;

  /* ── Tipografía · Letter spacing ──────────────────────── */
  --pf-tracking-tight:  -0.02em;
  --pf-tracking-normal: 0;
  --pf-tracking-wide:   0.08em;   /* eyebrows, labels */

  /* ── Spacing scale (8pt base, mobile-first) ───────────── */
  --pf-space-0:   0;
  --pf-space-1:   4px;
  --pf-space-2:   8px;
  --pf-space-3:   12px;
  --pf-space-4:   16px;
  --pf-space-5:   20px;
  --pf-space-6:   24px;
  --pf-space-8:   32px;
  --pf-space-10:  40px;
  --pf-space-12:  48px;
  --pf-space-16:  64px;
  --pf-space-20:  80px;

  /* ── Radii ────────────────────────────────────────────── */
  --pf-radius-sm:   6px;
  --pf-radius-md:   10px;
  --pf-radius-lg:   16px;
  --pf-radius-xl:   24px;
  --pf-radius-pill: 999px;

  /* ── Borders ──────────────────────────────────────────── */
  --pf-border-w-thin:    1px;
  --pf-border-w-base:    1.5px;
  --pf-border-w-strong:  2px;

  /* ── Sombras ──────────────────────────────────────────── */
  --pf-shadow-sm:  0 1px 2px rgba(31, 28, 25, 0.06);
  --pf-shadow-md:  0 4px 12px rgba(31, 28, 25, 0.08);
  --pf-shadow-lg:  0 12px 32px rgba(31, 28, 25, 0.12);
  --pf-shadow-cta: 0 6px 16px rgba(196, 90, 46, 0.25);   /* sombra cálida bajo el CTA primario */
  --pf-shadow-sticky: 0 -8px 24px rgba(31, 28, 25, 0.06); /* sticky bottom hacia arriba */

  /* ── Touch targets / accesibilidad ────────────────────── */
  --pf-tap-min:    44px;          /* WCAG mínimo para touch targets */
  --pf-input-h:    48px;          /* alto base de inputs y botones */
  --pf-input-h-sm: 40px;

  /* ── Layout ───────────────────────────────────────────── */
  --pf-container-sm:  640px;
  --pf-container-md:  768px;
  --pf-container-lg:  1024px;
  --pf-container-xl:  1280px;
  --pf-container-2xl: 1440px;
  --pf-content-w:     720px;      /* ancho cómodo para texto largo */

  --pf-section-py:     56px;      /* padding vertical sección desktop */
  --pf-section-py-sm:  32px;      /* sección compacta */
  --pf-page-px:        16px;      /* padding lateral mobile */
  --pf-page-px-md:     32px;
  --pf-page-px-lg:     48px;

  /* ── Z-index escala ───────────────────────────────────── */
  --pf-z-base:    1;
  --pf-z-sticky:  10;
  --pf-z-nav:     20;
  --pf-z-overlay: 50;
  --pf-z-modal:   100;
  --pf-z-toast:   200;

  /* ── Motion ───────────────────────────────────────────── */
  --pf-ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --pf-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --pf-dur-fast:    120ms;
  --pf-dur-base:    200ms;
  --pf-dur-slow:    320ms;
}

/* ============================================================
   Paletas alternativas
   Cambia las 5 variables --pf-accent-* + --pf-bg si quieres
   probar otra. Lista en tokens.md.
   ============================================================ */

/* Terracota — más maduro, profesional
:root {
  --pf-accent-600: #9a4429;
  --pf-accent-500: #c0573a;
  --pf-accent-300: #e2917a;
  --pf-accent-100: #f4d4c4;
  --pf-bg:         #faf2e8;
} */

/* Miel — dorado, luminoso
:root {
  --pf-accent-600: #ad8330;
  --pf-accent-500: #d9a441;
  --pf-accent-300: #ecc97f;
  --pf-accent-100: #fbeacb;
  --pf-bg:         #fbf6ec;
} */

/* Salvia — verde herbáceo, calma
:root {
  --pf-accent-600: #5d6f44;
  --pf-accent-500: #7a8d5c;
  --pf-accent-300: #a8b78c;
  --pf-accent-100: #e2e7d3;
  --pf-bg:         #f9f6ec;
} */

/* Azul polvo — confianza serena, clásico cuidado
:root {
  --pf-accent-600: #44616d;
  --pf-accent-500: #5b7d8c;
  --pf-accent-300: #98b5c2;
  --pf-accent-100: #d9e3e8;
  --pf-bg:         #f8f6ef;
} */