/* BEVYRA public site · one set of colour roles, v18.
   Loaded after page styles. Product photos, store badges and app UI previews
   retain their original colours. Business keeps its approved olive accent. */
:root {
  --milk: #FFF8F1;
  --cocoa: #4A3A2E;
  --cocoa-hover: #604B3B;
  --oat: #F1E2CF;
  --rose: #B77A70;
  --quiet: #796C60;
  --line: #E5D6C6;
  --paper: #FFFDFA;
  --accent-small: #955B50;
  --quiet-on-oat: #6F6155;
  --accent-on-oat: #8B5449;
  --heading-accent: var(--rose);
  --olive: #6D6841;
  --olive-hover: #5B5735;
}

/* Secondary and accent text are a little darker on the oat surface. */
:is(.review-bar, .blog-feature, .blog-editor-section, .blog-empty,
    .article-essential, .article-checklist, .shop-activation,
    .notebook-gallery, .shop-notebook-visual, .mission-principles-band,
    .mission-close, .support-principles-band) {
  --quiet: var(--quiet-on-oat);
  --accent-small: var(--accent-on-oat);
  --heading-accent: var(--accent-on-oat);
}

body { background-color: var(--milk); color: var(--cocoa); }
.eyebrow { color: var(--accent-small); }
.lead, .meta, .muted { color: var(--quiet); }
.button, .blog-page .button {
  color: var(--milk);
  background-color: var(--cocoa);
  border-color: var(--cocoa);
}
.button:hover:not(:disabled), .blog-page .button:hover:not(:disabled) {
  color: var(--milk);
  background-color: var(--cocoa-hover);
  border-color: var(--cocoa-hover);
}
.button.outline, .blog-page .button.outline {
  color: var(--cocoa);
  background-color: transparent;
  border-color: var(--cocoa);
}
.button.outline:hover:not(:disabled), .blog-page .button.outline:hover:not(:disabled) {
  color: var(--cocoa);
  background-color: var(--oat);
  border-color: var(--cocoa);
}
.text-link:hover, .blog-page .text-link:hover,
.blog-story-bottom a:hover, .article-related-link:hover {
  color: var(--accent-small);
  border-color: currentColor;
}
.social-links a {
  background-color: var(--cocoa);
  border-color: var(--cocoa);
  color: var(--milk);
}
.social-links a:hover {
  background-color: var(--cocoa-hover);
  border-color: var(--cocoa-hover);
  color: var(--milk);
}
.blog-filter:hover, .notebook-view-controls button:hover,
.shop-gallery-controls .button.outline:hover {
  background-color: var(--oat);
  border-color: var(--cocoa);
  color: var(--cocoa);
}
.blog-filter[aria-pressed=true], .notebook-view-controls button[aria-pressed=true],
.shop-gallery-controls .button[aria-pressed=true] {
  background-color: var(--cocoa);
  border-color: var(--cocoa);
  color: var(--milk);
}
.blog-filter[aria-pressed=true]:hover,
.notebook-view-controls button[aria-pressed=true]:hover,
.shop-gallery-controls .button[aria-pressed=true]:hover {
  background-color: var(--cocoa-hover);
  border-color: var(--cocoa-hover);
  color: var(--milk);
}
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
.blog-search input:focus-visible {
  outline: 2px solid var(--cocoa);
  outline-offset: 5px;
}
.support-mission-copy em, .support-download-copy em, .support-spaces-intro em {
  color: var(--heading-accent);
}

/* Business is an intentionally distinct product, not a public-site CTA. */
.support-space-business .button {
  background-color: var(--olive);
  border-color: var(--olive);
  color: var(--milk);
}
.support-space-business .button:hover:not(:disabled) {
  background-color: var(--olive-hover);
  border-color: var(--olive-hover);
  color: var(--milk);
}
.support-space-business .eyebrow { color: var(--olive); }