/* ============================================================================
   Claire Organics — Redesign tokens & global foundation  ("Botanical Apothecary")
   Loaded AFTER theme.css, so these rules win. CSS-only, additive.
   ========================================================================== */

:root {
  /* palette */
  --rd-bg:        #F7F2E8;   /* warm ivory canvas */
  --rd-surface:   #FFFFFF;   /* cards / header */
  --rd-sand:      #EFE6D5;   /* warm tint band / image bed */
  --rd-sand-soft: #F2EBDC;
  --rd-ink:       #2C342A;   /* primary text + headings */
  --rd-ink-soft:  #5B6157;   /* body / secondary */
  --rd-sage:      #5E7E64;   /* primary accent / buttons */
  --rd-sage-deep: #496450;   /* hover / depth */
  --rd-sage-tint: #DCE6DB;   /* chips, badge beds */
  --rd-forest:    #333D2C;   /* footer / deep bands */
  --rd-clay:      #B0764F;   /* secondary accent: sale, discount */
  --rd-clay-soft: #C58A63;
  --rd-clay-deep: #8F5630;   /* deepened clay for text/badges — AA on white & ivory */
  --rd-line:      #E5DCCB;   /* warm hairline */

  /* merchant-facing hooks — every value here can be overridden from the theme
     editor's Colors tab: snippets/rd-color-vars.liquid re-declares these on
     :root AFTER this sheet, so these are the defaults, not the law */
  --rd-btn-ink:      #FFFFFF;            /* button label */
  --rd-link:         var(--rd-ink);      /* inline links (hover stays --rd-sage) */
  --rd-logo-ink:     var(--rd-ink);      /* text logo */
  --rd-checkout-bg:  var(--rd-sage);     /* checkout buttons */
  --rd-checkout-ink: var(--rd-btn-ink);
  --rd-footer-ink:   #E9E3D4;            /* footer text; muted shades derive from it */
  --rd-footer-accent:#9DB79F;            /* sage that reads on the forest footer */

  /* disabled / sold-out — a dead warm stone, clearly not the live sage */
  --rd-disabled-bg:  #CFC9BB;
  --rd-disabled-ink: #6A665C;  /* AA-legible on --rd-disabled-bg */

  /* type */
  --rd-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --rd-sans:  'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* scale / motion */
  --rd-page: 1320px;
  /* the header runs wider than the content measure so the nav fits more links */
  --rd-header-page: 1760px;
  --rd-measure: 64ch;
  --rd-section: clamp(56px, 8vw, 104px);
  --rd-radius: 4px;
  --rd-radius-card: 12px;
  --rd-ease: cubic-bezier(.4, 0, .2, 1);
  --rd-dur: .45s;
  --rd-shadow: 0 18px 50px -28px rgba(44, 52, 42, .45);
  --rd-shadow-sm: 0 10px 28px -20px rgba(44, 52, 42, .4);

  /* eyebrow / label role — one consolidated token set (was 5 ad-hoc values).
     Deep sage clears WCAG AA as small text on ivory (≈5.8:1) & sand (≈5.5:1). */
  --rd-eyebrow-color: var(--rd-sage-deep);
  --rd-eyebrow-size: .72rem;
  --rd-eyebrow-weight: 600;
  --rd-track-eyebrow: .22em;
}

/* ---- canvas ---- */
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--rd-bg) !important;          /* drop the fixed bg PNG */
  background-image: none !important;
  color: var(--rd-ink);
  font-family: var(--rd-sans);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--rd-sage-tint); color: var(--rd-ink); }

/* ---- typography ---- */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6,
.section-header__title,
.site-header__logo, h1.site-header__logo, .site-header__logo.h1 {
  font-family: var(--rd-serif);
  color: var(--rd-ink);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.18;
  font-optical-sizing: auto;
}
h1, .h1 { font-weight: 500; }
p { color: var(--rd-ink-soft); }

.site-header__logo, h1.site-header__logo, .site-header__logo.h1,
.site-header__logo a { color: var(--rd-logo-ink); }

a { color: var(--rd-link); transition: color var(--rd-dur) var(--rd-ease); }
a:hover, a:active, a:focus { color: var(--rd-sage); }

/* shared editorial helpers */
.rd-eyebrow {
  font-family: var(--rd-sans);
  font-size: var(--rd-eyebrow-size);
  font-weight: var(--rd-eyebrow-weight);
  letter-spacing: var(--rd-track-eyebrow);
  text-transform: uppercase;
  color: var(--rd-eyebrow-color);
  display: inline-block;
  margin-bottom: 14px;
}
.rd-section-head { text-align: center; max-width: 640px; margin: 0 auto clamp(28px, 4vw, 48px); }
.rd-section-head h2,
.rd-section-head .section-header__title {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  margin: 0 0 .4em;
}
.rd-section-head p { font-size: 1.02rem; color: var(--rd-ink-soft); margin: 0; }

/* divider flourish */
.rd-flourish { display: block; width: 46px; height: 1px; background: var(--rd-clay); margin: 18px auto 0; opacity: .7; }

/* ============================================================================
   Buttons — sage system (sweep out every gold)
   ========================================================================== */
.btn,
input[type="submit"],
button.btn {
  background-color: var(--rd-sage);
  color: var(--rd-btn-ink);
  font-family: var(--rd-sans);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .82rem;
  border: 0;
  border-radius: var(--rd-radius);
  box-shadow: none;
  transition: background-color var(--rd-dur) var(--rd-ease),
              box-shadow var(--rd-dur) var(--rd-ease),
              transform var(--rd-dur) var(--rd-ease);
}
.btn:hover, input[type="submit"]:hover,
.btn--tertiary:hover, .btn--secondary:hover,
.btn:focus, input[type="submit"]:focus,
.btn:active, input[type="submit"]:active {
  background-color: var(--rd-sage-deep);
  color: var(--rd-btn-ink);
  box-shadow: var(--rd-shadow-sm);
}
/* Disabled / sold-out. timber.js + theme.js mark these with BOTH the `disabled`
   attribute and a `.disabled` class (the product-card quick-add is a <div>, so it
   only ever gets the class). The buy-box buttons are painted by ID selectors in
   redesign-product.css, which outrank a plain `.btn.disabled` — so the sold-out
   button kept its live sage fill and read as clickable. Carrying the ID here is
   what makes the grey actually land. Hover/active are pinned too, otherwise
   `.btn:hover` repaints a dead button on the way past. */
.btn[disabled]:not(.btn--loading),
.btn[disabled]:not(.btn--loading):hover,
.btn[disabled]:not(.btn--loading):active,
input[disabled][type="submit"]:not(.btn--loading),
input[disabled][type="submit"]:not(.btn--loading):hover,
.btn.disabled:not(.btn--loading),
.btn.disabled:not(.btn--loading):hover,
.btn.disabled:not(.btn--loading):active,
#AddToCart[disabled]:not(.btn--loading),
#AddToCart[disabled]:not(.btn--loading):hover,
#AddToCart[disabled]:not(.btn--loading):active,
#AddToCart.disabled:not(.btn--loading),
#AddToCart.disabled:not(.btn--loading):hover,
#MobileAddToCart[disabled]:not(.btn--loading),
#MobileAddToCart[disabled]:not(.btn--loading):hover,
#MobileAddToCart[disabled]:not(.btn--loading):active,
#MobileAddToCart.disabled:not(.btn--loading),
#MobileAddToCart.disabled:not(.btn--loading):hover {
  background-color: var(--rd-disabled-bg);
  color: var(--rd-disabled-ink);
  box-shadow: none;
  cursor: not-allowed;
}

/* secondary / tertiary → muted stone, not grey-blue */
.btn--secondary, input.btn--secondary,
.btn--tertiary, input.btn--tertiary {
  background-color: var(--rd-ink-soft);
  color: #fff;
}
.btn--secondary:hover, .btn--tertiary:hover { background-color: var(--rd-ink); color: #fff; }

/* misc gold sweeps */
.modal__dialog .modal__dialog-wrapper .modal__dialog-express-checkout .btn--text { color: var(--rd-sage); }
.cart-drawer .cart-drawer-wrapper .cart-drawer-content .cart-sticky-button .btn.checkout {
  background-color: var(--rd-checkout-bg);
  color: var(--rd-checkout-ink);
}
.btn.checkout { background-color: var(--rd-checkout-bg); color: var(--rd-checkout-ink); }
/* checkout hover deepens its own bg (not the primary button's), so a custom
   checkout colour doesn't snap to sage-deep on the way past */
.btn.checkout:hover, .btn.checkout:focus, .btn.checkout:active,
.cart-drawer .cart-drawer-wrapper .cart-drawer-content .cart-sticky-button .btn.checkout:hover {
  background-color: color-mix(in srgb, var(--rd-checkout-bg) 78%, #000);
  color: var(--rd-checkout-ink);
}

/* focus-visible — accessible, on-brand */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--rd-sage);
  outline-offset: 2px;
}

@keyframes rd-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes rd-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }