/*
Theme Name:  Flore Mar
Template:    storefront
Version:     1.0.1
Description: Tema hijo de Storefront — Flore Mar, cuidado personal natural
Author:      Jorge
*/

/* ── DESIGN TOKENS ── */
:root {
  /* Verdes */
  --sage:         #6B8F71;
  --sage-dark:    #4A6B50;
  --sage-light:   #A8C5AD;
  --sage-pale:    #E8F0EA;

  /* Rosas */
  --blush:        #D4A5A5;
  --blush-light:  #F0E0E0;
  --blush-dark:   #b8856e;

  /* Cremas */
  --cream:        #FAF7F2;
  --cream-dark:   #F0EBE3;
  --cream-mid:    #E8E2D9;
  --warm-white:   #fdfaf6;

  /* Textos */
  --text:         #2C2C2C;
  --text-light:   #6B6B6B;
  --text-lighter: #999;
  --warm-gray:    #8c877e;
  --charcoal:     #2a2825;

  /* Miscelánea */
  --light-gray:   #e8e4df;
  --gold:         #c9a96e;
  --white:        #fff;
  --radius:       12px;
  --shadow:       0 4px 28px rgba(0,0,0,0.08);

  /* Fuentes */
  --font-d:       'Cormorant Garamond', serif;
  --font-b:       'Jost', sans-serif;

  /* Aliases --fm-* para compatibilidad con templates legacy */
  --fm-sage:          var(--sage);
  --fm-sage-dark:     var(--sage-dark);
  --fm-sage-light:    var(--sage-light);
  --fm-sage-pale:     var(--sage-pale);
  --fm-blush:         var(--blush);
  --fm-blush-light:   var(--blush-light);
  --fm-cream:         var(--cream);
  --fm-cream-dark:    var(--cream-dark);
  --fm-cream-mid:     var(--cream-mid);
  --fm-text:          var(--text);
  --fm-text-light:    var(--text-light);
  --fm-text-lighter:  var(--text-lighter);
  --fm-font-d:        var(--font-d);
  --fm-font-b:        var(--font-b);
  --fm-radius:        var(--radius);
}

/* ── RESET BASE ── */
*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: var(--font-b);
  background: var(--cream);
  color: var(--text);
  overflow-x: hidden;
}