/* ============================================================================
   FocusFlow brand theme — overrides the commerce-factory chassis tokens
   in commerce.css. Loaded by base.html.j2 right AFTER commerce.css so
   these :root values win the cascade naturally.

   Palette:
     #1a3a52  deep navy   →  trust, calm focus, premium                  --ac / --hi
     #d4a574  warm sand   →  vanilla-mocha, morning light                accent
     #fdfaf5  cream       →  premium light background                    --bg
     #ffffff  white       →  surfaces / cards                            --sur
     #2c2c2c  near-black  →  body text                                   --tx
     #6b6b6b  muted       →  meta text                                   --tx2/--tx3
============================================================================ */

:root {
  /* Brand tokens — single source of truth for FocusFlow colors. */
  --ff-navy:        #1a3a52;
  --ff-navy-d:      #143245;
  --ff-sand:        #d4a574;
  --ff-sand-d:      #b8895a;
  --ff-cream:       #fdfaf5;
  --ff-cream-2:     #f6f0e6;
  --ff-text:        #2c2c2c;
  --ff-muted:       #6b6b6b;
  --ff-muted-2:     #8a8a8a;
  --ff-border:      #e8e3da;
}

/* Override the chassis tokens. Apply to BOTH the dark default and any
   light-theme toggle — FocusFlow is a light-bg brand, period. */
html,
html[data-theme="dark"],
html[data-theme="light"] {
  --bg:    var(--ff-cream);
  --sur:   #ffffff;
  --sur2:  var(--ff-cream-2);
  --bdr:   var(--ff-border);
  --bdr2:  #d8d2c4;
  --hi:    var(--ff-navy);
  --tx:    var(--ff-text);
  --tx2:   var(--ff-muted);
  --tx3:   var(--ff-muted-2);
  --ac:    var(--ff-navy);
  --acg:   color-mix(in oklch, var(--ff-navy) 18%, transparent);
  --ac-lo: color-mix(in oklch, var(--ff-navy) 8%, transparent);
  --ac2:   var(--ff-sand);

  background: var(--bg);
  color: var(--tx);
  color-scheme: light;
}

body {
  background: var(--bg);
  color: var(--tx);
}

/* Editorial heading face — Charter falls back through Iowan Old Style to
   Georgia. No webfont fetch (zero LCP hit). */
h1, h2, h3, .sec-h, .nav__name, .ft__brand-h, .product-price, .testimonial-feat__q {
  font-family: 'Charter', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  letter-spacing: -0.01em;
}

/* Eyebrow + small-caps labels use the warm sand for visual rhythm against
   the cream background. */
.lbl,
.eyebrow {
  color: var(--ff-sand-d);
}

/* Sand-toned accent rule under the hero claim. */
.hr-ac {
  background: linear-gradient(90deg, var(--ff-sand), transparent);
}

/* The accent-shim stat numbers — keep them sand-toned (the navy "--ac"
   would clash with the brand-sand visual highlight). */
.stat-item__val { color: var(--ff-sand-d); }

/* Free-shipping bar — light cream with navy text fits the rest of the
   palette better than a dark inverted strip. */
.strip:not(:has(.strip__it)) {
  background: var(--ff-cream-2);
  color: var(--ff-navy);
}
.strip:not(:has(.strip__it)) .strip__d {
  color: var(--ff-navy);
}

/* CTA accent override — semi-pill, bigger tap target on the hero & buybox. */
.btn--lg { padding: var(--s4) var(--s6); }
.btn-cart,
.btn--p {
  background: var(--ff-navy);
  color: #ffffff;
  border-color: var(--ff-navy);
}
.btn-cart:hover,
.btn--p:hover {
  background: var(--ff-navy-d);
  color: #ffffff;
}

/* Subscribe-and-save featured row — sand-tinted background. */
.subsave__option--featured {
  background: color-mix(in oklch, var(--ff-sand) 14%, var(--bg));
  border-color: var(--ff-sand);
}

/* cf-funnels checkout.php uses these token names directly. */
:root {
  --cf-bg:     var(--ff-cream);
  --cf-text:   var(--ff-text);
  --cf-border: var(--ff-border);
  --cf-accent: var(--ff-navy);
  --cf-muted:  var(--ff-muted);
}
.cf-button-primary,
.cf-submit {
  background: var(--ff-navy);
  color: #ffffff;
  border: 0;
  border-radius: var(--r);
  font-weight: 600;
}
.cf-button-primary:hover,
.cf-submit:hover { background: var(--ff-navy-d); }
.cf-button-accent {
  background: var(--ff-sand);
  color: var(--ff-navy);
  border: 0;
  border-radius: var(--r);
  font-weight: 600;
}
.cf-mock-note {
  background: var(--ff-cream-2);
  border-color: var(--ff-sand);
  color: var(--ff-navy);
}