/* SleepHome — tokens
   Fuente: design_handoff_sleephome/SleepHome Sistema de Marca.dc.html
   Único lugar donde vive un hex, un px de radio o un nombre de fuente.
   Nada fuera de este archivo debe hard-codear valores. */

:root {
  /* ---- Paleta cruda ---- */
  --shm-teal-500: #4BAAA6;
  --shm-teal-600: #36807C;
  --shm-teal-700: #2A6562;
  --shm-gold-300: #CFB791;
  --shm-gold-500: #C2A06A;
  --shm-gold-700: #A07D4A;
  --shm-ink-900:  #2D2D2D;
  --shm-cream-50: #F8F6F1;
  --shm-sand-100: #F0EDE7;
  --shm-border-200: #ECE7DE;
  --shm-border-300: #E4DED4;
  --shm-grey-500: #999;
  --shm-grey-600: #888;
  --shm-grey-700: #666;
  --shm-rust-500: #B5562F;
  --shm-wa-900:   #25382f;
  --shm-white:    #fff;

  /* Solo footer (fondo tinta) */
  --shm-footer-text: #cfcabf;
  --shm-footer-link: #9d988e;
  --shm-footer-legal: #7a766d;
  --shm-footer-rule: rgba(255, 255, 255, .12);

  /* ---- Roles ---- */
  --color-brand:            var(--shm-teal-500);
  --color-brand-strong:     var(--shm-teal-600);
  --color-brand-stronger:   var(--shm-teal-700);
  --color-accent:           var(--shm-gold-500);
  --color-accent-soft:      var(--shm-gold-300);
  --color-accent-strong:    var(--shm-gold-700);

  --color-text:             var(--shm-ink-900);
  --color-text-secondary:   var(--shm-grey-700);
  --color-text-tertiary:    var(--shm-grey-600);
  --color-text-muted:       var(--shm-grey-500);
  --color-text-on-brand:    var(--shm-white);
  --color-text-on-accent:   var(--shm-ink-900);

  --color-bg:               var(--shm-white);
  --color-bg-alt:           var(--shm-cream-50);
  --color-bg-sunken:        var(--shm-sand-100);
  --color-bg-inverse:       var(--shm-ink-900);

  --color-border:           var(--shm-border-200);
  --color-border-input:     var(--shm-border-300);

  --color-link:             var(--shm-teal-600);
  --color-link-hover:       var(--shm-teal-700);
  --color-price:            var(--shm-teal-600);
  --color-sale:             var(--shm-rust-500);
  --color-whatsapp:         var(--shm-wa-900);

  /* Botón primario */
  --btn-primary-bg:         var(--shm-teal-600);
  --btn-primary-bg-hover:   var(--shm-teal-700);
  --btn-primary-text:       var(--shm-white);
  /* Botón secundario */
  --btn-accent-bg:          var(--shm-gold-500);
  --btn-accent-bg-hover:    var(--shm-gold-700);
  --btn-accent-text:        var(--shm-ink-900);

  --gradient-brand: linear-gradient(150deg, var(--shm-teal-500) 0%, var(--shm-teal-600) 60%, var(--shm-teal-700) 100%);

  /* ---- Tipografía ---- */
  --font-heading: 'Play', system-ui, sans-serif;
  --font-body:    'Jost', system-ui, sans-serif;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --text-h1: 56px;
  --text-h2: 34px;
  --text-h3: 20px;
  --text-lead: 18px;
  --text-body: 16px;
  --text-body-sm: 15px;
  --text-meta: 13px;
  --text-eyebrow: 12px;

  --lh-tight: 1.02;
  --lh-heading: 1.2;
  --lh-body: 1.7;
  --lh-snug: 1.65;

  --ls-eyebrow: 3px;
  --ls-label: 2px;
  --ls-btn: .5px;

  /* ---- Espaciado (derivado, base 4px — no venía en el handoff) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ---- Radios ---- */
  --radius-btn: 8px;
  --radius-pill: 30px;
  --radius-input: 8px;
  --radius-card: 14px;
  --radius-badge: 20px;
  --radius-sale-badge: 5px;

  /* ---- Sombras ---- */
  --shadow-card: 0 6px 28px rgba(0, 0, 0, .10);
  --shadow-card-hover: 0 12px 30px rgba(54, 128, 124, .14);
  --shadow-raised: 0 16px 40px rgba(0, 0, 0, .18);

  /* ---- Layout ---- */
  --container-max: 1280px;
  --container-pad: var(--space-12);

  /* ---- Imagen (dimensiones de origen) ---- */
  --img-hero: 1600 / 1200;
  --img-product: 1 / 1;      /* subir a 1200×1200; Woo recorta desde ahí */
  --img-category: 1000 / 1250;

  /* Galería de producto: la principal se muestra 650×560, no cuadrada */
  --gallery-main-h: 560px;
  --gallery-thumb-h: 84px;
}