/* ============================================================
   FLORE — Design System Foundations
   Ritual over routine. Recovery rituals for the body in motion.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..600;1,6..96,400..500&family=Hanken+Grotesk:wght@300;400;500;600&display=swap');

:root {
  /* ---- Color: Flore neutrals (warmed + deepened) ---- */
  --flore-ink:    #1C1611; /* near-black — primary text + Ink mark */
  --flore-bone:   #F4EEE1; /* warm near-white — page / reversed marks */
  --flore-oat:    #E9E3D6; /* light ground / surface */
  --flore-greige: #D2C5B1; /* kit "Stone" — light greige */
  --flore-sand:   #C9BAA2; /* mid sand / travertine / tonal */
  --flore-taupe:  #9C8970; /* deep taupe — muted text */

  /* ---- Accent: deep oxblood (the one accent — used rarely) ---- */
  --flore-wine:        #5E2A33; /* deep oxblood — emphasis, marks on light */
  --flore-wine-soft:   #8A4E57; /* lifted oxblood — hover / accents on dark */
  --flore-accent:      var(--flore-wine);
  --flore-accent-soft: var(--flore-wine-soft);

  /* ---- Per-product tones (one muted tone per bottle) ---- */
  --flore-tone-ember:  #9E6238; /* Act I  · Ember  — warm terracotta (activation) */
  --flore-tone-revive: #8A463C; /* Act II · Revive — clay rust (deep repair) */
  --flore-tone-drift:  #5E6678; /* Act III· Drift  — cool slate (rest) */
  --flore-tone-veil:   #76806A; /* Act IV · Veil   — muted sage (cleansing) */

  /* ---- Semantic + aliases (used across components & templates) ---- */
  --flore-paper:    var(--flore-bone);
  --flore-veil:     var(--flore-oat);
  --flore-plaster:  var(--flore-oat);
  --flore-charcoal: var(--flore-ink);
  --flore-drift:    var(--flore-greige);
  --flore-stone:    var(--flore-taupe);   /* readable muted text */
  --flore-clay:     var(--flore-wine);    /* accent now = oxblood */
  --flore-clay-soft:var(--flore-sand);
  --flore-bg:        var(--flore-oat);
  --flore-surface:   var(--flore-bone);
  --flore-text:      var(--flore-ink);
  --flore-text-soft: var(--flore-taupe);
  --flore-line:      #DED4C1; /* hairline on light grounds */
  --flore-line-soft: #E7E0D1;

  /* ---- Type ---- */
  --font-display: 'Bodoni Moda', 'Didot', 'Times New Roman', Georgia, serif;
  --font-sans:    'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;

  --fs-eyebrow:  0.8125rem;  /* 13 — uppercase, tracked */
  --fs-caption:  0.875rem;   /* 14 */
  --fs-body:     1.0625rem;  /* 17 */
  --fs-body-lg:  1.25rem;    /* 20 */
  --fs-h6:       1.5rem;     /* 24 */
  --fs-h5:       1.875rem;   /* 30 */
  --fs-h4:       2.5rem;     /* 40 */
  --fs-h3:       3.25rem;    /* 52 */
  --fs-h2:       4.5rem;     /* 72 */
  --fs-h1:       6rem;       /* 96 */
  --fs-display:  8.5rem;     /* 136 */

  --tracking-eyebrow: 0.22em;
  --tracking-tight:  -0.01em;
  --tracking-display:-0.015em;

  --leading-tight: 1.04;
  --leading-snug:  1.18;
  --leading-body:  1.55;

  /* ---- Space / shape ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;

  --hairline: 1px solid var(--flore-line);
  --shadow-soft: 0 1px 2px rgba(42,39,33,.04), 0 18px 40px -28px rgba(42,39,33,.28);
}

/* ---- light base for cards / templates that opt in via .flore ---- */
.flore {
  background: var(--flore-bg);
  color: var(--flore-text);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Helper type classes (used by foundation cards) ---- */
.flore-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--flore-text-soft);
}
.flore-display {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}
.flore-serif {
  font-family: var(--font-display);
  font-weight: 400;
}
.flore-sans { font-family: var(--font-sans); }