/* Wildfire Trading Co. — design tokens
   Enqueue this BEFORE the theme stylesheet. Mirror these values into
   theme.json so the block editor's colour and typography pickers match. */

:root {
  /* ---- Colour ---- */
  --wf-ash:        #14110F;
  --wf-charcoal:   #241F1B;
  --wf-ember:      #C6440B;
  --wf-ember-deep: #8E2F06;
  --wf-birch:      #F2EBE0;
  --wf-kraft:      #C4A484;
  --wf-lichen:     #6B7A5A;
  --wf-smoke:      #55524D;

  /* Semantic aliases — use these in components, not the raw names above */
  --wf-bg:            var(--wf-birch);
  --wf-bg-inverse:    var(--wf-ash);
  --wf-surface:       #FFFFFF;
  --wf-surface-inverse: var(--wf-charcoal);
  --wf-text:          var(--wf-ash);
  --wf-text-muted:    var(--wf-smoke);
  --wf-text-inverse:  var(--wf-birch);
  --wf-accent:        var(--wf-ember);
  --wf-accent-hover:  var(--wf-ember-deep);
  --wf-border:        rgba(196, 164, 132, 0.4);   /* kraft @ 40% — the hairline rule */
  --wf-border-strong: rgba(20, 17, 15, 0.16);

  /* ---- Type ---- */
  --wf-font-display: "Oswald", "Arial Narrow", sans-serif;
  --wf-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --wf-font-accent:  "Source Serif 4", Georgia, serif;

  --wf-size-hero:  clamp(2.5rem, 6vw, 3.5rem);
  --wf-size-h1:    clamp(2rem, 4.5vw, 2.5rem);
  --wf-size-h2:    1.75rem;
  --wf-size-h3:    1.25rem;
  --wf-size-body:  1.0625rem;
  --wf-size-small: 0.875rem;
  --wf-size-micro: 0.75rem;

  --wf-track-display: 0.06em;
  --wf-track-wordmark: 0.14em;
  --wf-leading-body: 1.65;
  --wf-measure: 68ch;

  /* ---- Space (8px base) ---- */
  --wf-1: 0.5rem;  --wf-2: 1rem;   --wf-3: 1.5rem;
  --wf-4: 2rem;    --wf-5: 3rem;   --wf-6: 4rem;
  --wf-7: 6rem;    --wf-8: 8rem;

  /* ---- Form ---- */
  --wf-radius: 2px;              /* square-ish. never go above 4px. */
  --wf-shadow: none;             /* this brand does not use drop shadows */
  --wf-maxw: 1280px;
  --wf-ease: cubic-bezier(0.2, 0.6, 0.3, 1);
}

/* ---- Primitives ---- */

.wf-display {
  font-family: var(--wf-font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--wf-track-display);
  line-height: 1.1;
}

.wf-wordmark {
  font-family: var(--wf-font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--wf-track-wordmark);
}

.wf-btn {
  font-family: var(--wf-font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--wf-track-display);
  font-size: var(--wf-size-small);
  background: var(--wf-accent);
  color: var(--wf-birch);
  border: 0;
  border-radius: var(--wf-radius);
  padding: 0.9rem 2rem;
  cursor: pointer;
  transition: background 160ms var(--wf-ease);
}
.wf-btn:hover { background: var(--wf-accent-hover); }

.wf-btn--ghost {
  background: transparent;
  color: currentColor;
  border: 1px solid var(--wf-border);
}
.wf-btn--ghost:hover { background: var(--wf-accent); color: var(--wf-birch); border-color: var(--wf-accent); }

.wf-rule { border: 0; border-top: 1px solid var(--wf-border); margin: var(--wf-5) 0; }

.wf-notes {                       /* the scent-notes panel on the PDP */
  border: 1px solid var(--wf-border);
  background: rgba(196, 164, 132, 0.08);
  padding: var(--wf-3);
  font-family: var(--wf-font-accent);
  font-style: italic;
  color: var(--wf-text-muted);
}

/* ---- Dark sections ---- */
.wf-dark {
  background: var(--wf-bg-inverse);
  color: var(--wf-text-inverse);
  --wf-text: var(--wf-birch);
  --wf-text-muted: rgba(242, 235, 224, 0.62);
  --wf-border: rgba(196, 164, 132, 0.24);
}

/* ---- Accessibility floor ----
   Ember (#C6440B) on birch (#F2EBE0) is ~4.9:1 — passes AA for body text.
   Ember on ash (#14110F) is ~4.1:1 — use it for LARGE text and buttons only,
   never for body copy on dark. Kraft on ash is ~8.4:1 and is the safe choice
   for muted text on dark sections. */