/* =====================================================================
   Ereca Home design system layer
   Direction: "Nature Distilled" (UI/UX Pro Max): warm earth tones,
   handmade warmth, subtle texture, calm motion.
   Loaded LAST on every page so it unifies tokens and fixes
   accessibility without changing the layout.
   ===================================================================== */

:root {
  /* One palette for every page (previously four slightly different ones) */
  --cream: #f4f0e8;        /* soft cream background */
  --sand: #e9e1d2;         /* sand beige surfaces */
  --ink: #24251f;          /* text, 13.6:1 on cream */
  --muted-ink: #66665f;    /* secondary text, 5.1:1 on cream (was ~4.0) */
  --clay: #a3563c;         /* terracotta accent, 4.7:1 on cream (was 3.3) */
  --clay-deep: #8a4630;    /* hover / pressed */
  --sage: #aab39b;
  --olive: #5f6d35;
  --line: #c9c5b9;
  --gold: #d8aa59;

  --ease-natural: cubic-bezier(.22, .61, .36, 1);
  --t-fast: 180ms;
  --t-med: 260ms;
  --focus-ring: 2px solid var(--clay);
}

/* ---------- Texture: very light paper grain, like woven cotton ---------- */
body { position: relative; }
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: .06;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .2 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Readable small text (nothing below 11px) ---------- */
.announcement { font-size: 11px !important; letter-spacing: .08em; line-height: 1.4; height: auto !important; min-height: 34px; padding: 9px 16px !important; }
@media (max-width: 720px) {
  .announcement { font-size: 10px !important; letter-spacing: .04em; }
  .announcement span { padding: 0 6px !important; }
}
.eyebrow, .crumb, .result, .ticker,
.product p, .product-grid article p,
.trust-strip span, .trust-strip b,
.path-card span, .path-card b,
.space-grid span, .room-grid span, .size-cards span,
.filter, .craft-row button, .quick-add, .view-product,
.hero-actions a, .hero-storefront-caption, .consultation-banner a,
.story-cta a, .help a, .order, .choices button, .choices p,
.contact a small, footer label, footer small, .footer-bottom,
.socials span, .socials a, .nav-panel p, .mega-menu p, .menu-note span, .menu-note > a,
.category b, .journal-card b, .feature-stamp, .image-caption,
.hero-image span, .main-image span, .price small,
.principles b, .founder-note small, .founder-signoff small,
.text-link, .story-link, .guide > div > a, summary {
  font-size: 11px;
}
.shop-navigation > a, .shop-navigation summary,
.site-header nav a, header nav a, nav a, .chat, .bag-btn, .whatsapp {
  font-size: 12px;
}

/* Secondary text uses the darker muted tone for contrast */
.eyebrow, .crumb, .product p, .product-grid article p, .path-intro,
.space-grid span, .room-grid span, .size-cards p, .footer-bottom {
  color: var(--muted-ink);
}

/* ---------- Accent colour: one accessible terracotta ---------- */
.category-nav a.active { color: var(--clay); border-color: var(--clay); }
.shop-navigation details[open] summary { color: var(--clay); }
.empty-state a, .help a:hover, .text-link:hover { color: var(--clay); }

/* ---------- Interaction: pointer, smooth hover, visible focus ---------- */
a, button, summary, [role="button"], label[for] { cursor: pointer; }
a, button, summary, .path-card, .product-image img, .category img {
  transition:
    color var(--t-fast) var(--ease-natural),
    background-color var(--t-fast) var(--ease-natural),
    border-color var(--t-fast) var(--ease-natural),
    opacity var(--t-fast) var(--ease-natural),
    transform var(--t-med) var(--ease-natural);
}
.product-image, .category { overflow: hidden; }
@media (hover: hover) {
  .product:hover .product-image img,
  .category:hover img { transform: scale(1.03); }
  .path-card:hover { transform: translateY(-2px); }
}
:focus { outline: none; }
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
  border-radius: 2px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 1px; }

/* Buttons keep their label on one line */
.hero-actions a, .consultation-banner a, .story-cta a, .order, .quick-add { white-space: nowrap; }
@media (max-width: 720px) {
  .hero-actions { flex-wrap: wrap; gap: 14px 18px; }
  .hero-actions a { letter-spacing: .04em; }
}

/* ---------- Comfortable tap targets on phones ---------- */
@media (max-width: 720px) {
  .shop-navigation > a, .shop-navigation summary,
  .category-nav a, .filter, .craft-row button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .shop-navigation { gap: 22px; }
  .quick-add { min-height: 44px; }
  .site-footer a, footer a { padding-block: 6px; display: inline-block; }
}

/* ---------- Calm scroll reveal (only when JS + motion allowed) ---------- */
.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 400ms var(--ease-natural), transform 400ms var(--ease-natural);
}
.reveal-ready .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Respect "reduce motion" on every page ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal-ready .reveal { opacity: 1; transform: none; }
}

/* ---------- Order link on category cards (matches original label style) ---------- */
.order-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0;
  border: 0; background: none; cursor: pointer;
  font: 11px "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase;
  color: var(--clay); text-decoration: underline; text-underline-offset: 4px;
}
.order-link:hover { color: var(--clay-deep); }
.product-grid article .order-link { align-self: flex-start; margin-top: 4px; }
.product-grid article { display: flex; flex-direction: column; }
/* keep the WhatsApp notice fully hidden until it is shown */
.toast { visibility: hidden; opacity: 0; }
.toast.show { visibility: visible; opacity: 1; }

/* ---------- Contrast fixes (WCAG AA 4.5:1 for small text) ---------- */
.feature .eyebrow, .consultation-banner .eyebrow, .size-guide .eyebrow,
.manifesto .eyebrow, .texture > p, .texture p em { color: #4a4a44; }
.size-cards article > span, .guide article > span, .price > small { color: #5c5e57; }
.trust div > b { color: #7d3f2b; }
.principles article > b { color: #613c30; }
.popular > span, .popular > p, .founder-note .eyebrow { color: #c9c4b7; }
section.story .eyebrow { color: #3d3f37; }
.guide article.popular > span, article.popular > span { color: #c9c4b7; }