/* Mi Boda · Rediseño 2026-09 · Tokens visuales
   Paleta BP confirmada en 26 - Cumplimiento/rebuild-template/theme/style.css */

:root {
  /* Colores marca ------------------------------------------------ */
  --bp-green:            #42583E;
  --bp-green-hover:      #4e6349;
  --bp-green-deep:       #2e3d2b;
  --bp-green-dark:       #1a2418;
  --bp-cream:            #f0f3ef;
  --bp-beige:            #d4ddd2;
  --bp-white:            #ffffff;

  /* Neutros derivados ------------------------------------------- */
  --ink-900:             #14201a;
  --ink-800:             #1a2418;
  --ink-600:             #3d4a3c;
  --ink-500:             #566659;
  --ink-400:             #7a8878;
  --ink-300:             #a5b0a3;
  --ink-200:             #cbd3c9;
  --ink-100:             #e6ebe4;
  --ink-50:              #f6f8f5;

  /* Estados semánticos ------------------------------------------ */
  --state-done:          #42583E;   /* contratado - verde marca */
  --state-done-bg:       #eef2ec;
  --state-paid:          #80622a;   /* pagado - dorado WCAG AA (4.96:1) */
  --state-paid-bg:       #f6efe1;
  --state-search:        #8f5320;   /* buscando - ambar WCAG AA */
  --state-search-bg:     #fbf1e4;
  --state-compare:       #574170;   /* comparando - violeta WCAG AA */
  --state-compare-bg:    #f1eef7;
  --state-todo:          #576457;   /* por hacer - neutro WCAG AA */
  --state-todo-bg:       #eef1ec;
  --state-danger:        #a4443b;
  --state-danger-bg:     #f8ebe9;

  /* Tipografía --------------------------------------------------- */
  --font-serif:  'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fs-eyebrow:  0.72rem;
  --fs-body:     0.95rem;
  --fs-small:    0.82rem;
  --fs-h3:       1.15rem;
  --fs-h2:       clamp(1.5rem, 3.2vw, 2.05rem);
  --fs-h1:       clamp(2rem, 5.2vw, 3.1rem);
  --fs-display:  clamp(2.4rem, 8vw, 4.4rem);

  --lh-tight:    1.1;
  --lh-snug:     1.3;
  --lh-body:     1.6;

  --tracking-wide: 0.08em;
  --tracking-tight: -0.01em;

  /* Layout ------------------------------------------------------- */
  --container:        1280px;  /* Ampliado 2026-09-18 · desktops modernos 1440+ */
  --container-narrow: 820px;
  --gutter:           clamp(1.1rem, 4vw, 2rem);

  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Sombras editorial suaves ------------------------------------ */
  --shadow-xs: 0 1px 2px rgba(26, 36, 24, 0.04);
  --shadow-sm: 0 2px 6px rgba(26, 36, 24, 0.05);
  --shadow-md: 0 8px 24px rgba(26, 36, 24, 0.07);
  --shadow-lg: 0 18px 40px rgba(26, 36, 24, 0.10);
  --shadow-hero: 0 30px 60px rgba(26, 36, 24, 0.18);

  /* Motion ------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-mid: 240ms;
  --dur-slow: 420ms;

  /* Alturas específicas ----------------------------------------- */
  --topbar-h:  62px;
  --tabbar-h:  70px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Foco accesible visible pero editorial */
:focus-visible {
  outline: 2px solid var(--bp-green);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

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