/* Original primary palette. html:root takes precedence over generated ACSS :root tokens. */
html:root {
  --primary: light-dark(oklch(0.524648465 0.096 174.055589035), oklch(0.524648465 0.096 174.055589035));
  --primary-hover: light-dark(oklch(0.603 0.096 174.055589035), oklch(0.603 0.096 174.055589035));
  --primary-ultra-light: light-dark(oklch(0.95 0.02 174.0572175402), oklch(0.1 0.026 174.0098558132));
  --primary-ultra-dark: light-dark(oklch(0.1 0.026 174.0098558132), oklch(0.95 0.02 174.0572175402));
  --primary-light: light-dark(oklch(0.85 0.096 174.055589035), oklch(0.25 0.065 174.0372826143));
  --primary-dark: light-dark(oklch(0.25 0.065 174.0372826143), oklch(0.85 0.096 174.055589035));
  --primary-semi-light: light-dark(oklch(0.65 0.096 174.055589035), oklch(0.35 0.091 174.0425115785));
  --primary-semi-dark: light-dark(oklch(0.35 0.091 174.0425115785), oklch(0.65 0.096 174.055589035));
}

/* =========================================================
   BeanGrower Colour Schemes
   Global reusable colour contracts for sections, cards and panels.
   These use ACSS colour tokens as the source of truth.
   ========================================================= */

/* Base scheme contract */
.bg-scheme {
  --scheme-surface: var(--body-bg-color);
  --scheme-heading: var(--heading-color);
  --scheme-text: var(--text-color);
  --scheme-muted: var(--base-semi-light);
  --scheme-border: var(--border-color-dark);

  /* Inline accent text inside the scheme */
  --scheme-accent: var(--primary);

  /* Soft scheme-owned accent items */
  --scheme-accent-surface: var(--primary-ultra-light);
  --scheme-accent-text: var(--primary);
  --scheme-accent-border: var(--primary-light);

  /* Solid scheme-owned accent items */
  --scheme-accent-solid-surface: var(--primary);
  --scheme-accent-solid-text: var(--text-light);
  --scheme-accent-solid-border: var(--primary-semi-dark);

  --scheme-link: var(--scheme-accent);
  --scheme-link-hover: var(--link-color-hover);

  --scheme-icon: var(--primary);
  --scheme-icon-surface: var(--primary-ultra-light);
  --scheme-icon-border: var(--primary-light);
  --scheme-icon-accent: var(--secondary);

  /* Mini checklist artwork: the hero uses --scheme-accent for the main
     illustration colour and mixes --body-bg-color with --scheme-accent for
     the pale cloud. Choose only the contrasting detail colour here. */
  --scheme-art-detail: var(--secondary);

  background-color: var(--scheme-surface);
  color: var(--scheme-text);
  border-color: var(--scheme-border);
}

/* Low-specificity heading colour inside a scheme */
.bg-scheme :where(h1, h2, h3, h4, h5, h6) {
  color: var(--scheme-heading);
}

/* Optional muted text hook */
.bg-scheme :where([data-scheme-muted]) {
  color: var(--scheme-muted);
}

/* Normal links inside a scheme, excluding button links */
.bg-scheme :where(a:not([class*="btn--"])) {
  color: var(--scheme-link);
  text-decoration-line: underline;
}

.bg-scheme :where(a:not([class*="btn--"]):hover, a:not([class*="btn--"]):focus-visible) {
  color: var(--scheme-link-hover);
}

/* Scheme-controlled icons only. Do not target every [data-icon]. */
.bg-scheme :where([data-scheme-icon]) {
  color: var(--scheme-icon);
}

/* Optional accent part inside a scheme-controlled SVG icon */
.bg-scheme :where([data-scheme-icon] [data-accent]) {
  fill: var(--scheme-icon-accent);
}

/* Reusable scheme icon chip */
.bg-scheme :where(.bg-icon-chip) {
  display: inline-grid;
  place-items: center;
  inline-size: var(--space-xl);
  block-size: var(--space-xl);
  border: 1px solid var(--scheme-icon-border);
  border-radius: var(--radius);
  background-color: var(--scheme-icon-surface);
  color: var(--scheme-icon);
}


/* =========================================================
   Surface scheme variants
   ========================================================= */

.bg-scheme--body {
  --scheme-surface: var(--body-bg-color);
  --scheme-heading: var(--heading-color);
  --scheme-text: var(--text-color);
  --scheme-muted: var(--base-semi-light);
  --scheme-border: var(--border-color-dark);

  --scheme-accent: var(--primary);

  --scheme-accent-surface: var(--primary-ultra-light);
  --scheme-accent-text: var(--primary);
  --scheme-accent-border: var(--primary-light);

  --scheme-accent-solid-surface: var(--primary);
  --scheme-accent-solid-text: var(--text-light);
  --scheme-accent-solid-border: var(--primary-semi-dark);

  --scheme-link: var(--scheme-accent);
  --scheme-link-hover: var(--link-color-hover);

  --scheme-icon: var(--primary);
  --scheme-icon-surface: var(--primary-ultra-light);
  --scheme-icon-border: var(--primary-light);
  --scheme-icon-accent: var(--secondary);
  --scheme-art-detail: var(--secondary);

  --blockquote-text-color: var(--scheme-heading);
}

.bg-scheme--soft {
  --scheme-surface: var(--neutral-ultra-light);
  --scheme-heading: var(--heading-color);
  --scheme-text: var(--text-color);
  --scheme-muted: var(--base-semi-light);
  --scheme-border: var(--border-color-dark);

  --scheme-accent: var(--primary);

  --scheme-accent-surface: var(--primary-ultra-light);
  --scheme-accent-text: var(--primary);
  --scheme-accent-border: var(--primary-light);

  --scheme-accent-solid-surface: var(--primary);
  --scheme-accent-solid-text: var(--text-light);
  --scheme-accent-solid-border: var(--primary-semi-dark);

  --scheme-link: var(--scheme-accent);
  --scheme-link-hover: var(--link-color-hover);

  --scheme-icon: var(--primary);
  --scheme-icon-surface: var(--primary-ultra-light);
  --scheme-icon-border: var(--primary-light);
  --scheme-icon-accent: var(--secondary);
  --scheme-art-detail: var(--secondary);
  --scheme-art-cloud: color-mix(in srgb, var(--body-bg-color) 85%, var(--scheme-accent)); /*only required in soft schemes so cloud background isnt the same as section background*/
}

.bg-scheme--primary {
  --scheme-surface: var(--primary);
  --scheme-heading: var(--text-light);
  --scheme-text: var(--text-light-muted);
  --scheme-muted: var(--text-light-muted);
  --scheme-border: var(--border-color-dark);

  --scheme-accent: var(--secondary-light);

  --scheme-accent-surface: var(--secondary-light);
  --scheme-accent-text: var(--text-dark);
  --scheme-accent-border: var(--secondary-semi-light);

  --scheme-accent-solid-surface: var(--secondary);
  --scheme-accent-solid-text: var(--text-dark);
  --scheme-accent-solid-border: var(--secondary-semi-dark);

  --scheme-link: var(--scheme-accent);
  --scheme-link-hover: var(--secondary-ultra-light);

  --scheme-icon: var(--secondary-light);
  --scheme-icon-surface: var(--primary-semi-dark);
  --scheme-icon-border: var(--primary-light);
  --scheme-icon-accent: var(--secondary-light);
  --scheme-art-detail: var(--primary-light);

  --blockquote-text-color: var(--scheme-heading);
}

.bg-scheme--primary-soft {
  --scheme-surface: var(--primary-ultra-light);
  --scheme-heading: var(--heading-color);
  --scheme-text: var(--text-color);
  --scheme-muted: var(--base-semi-light);
  --scheme-border: var(--border-color-dark);

  --scheme-accent: var(--primary);

  --scheme-accent-surface: var(--white);
  --scheme-accent-text: var(--primary);
  --scheme-accent-border: var(--primary-light);

  --scheme-accent-solid-surface: var(--primary);
  --scheme-accent-solid-text: var(--text-light);
  --scheme-accent-solid-border: var(--primary-semi-dark);

  --scheme-link: var(--scheme-accent);
  --scheme-link-hover: var(--primary-semi-dark);

  --scheme-icon: var(--primary);
  --scheme-icon-surface: var(--white);
  --scheme-icon-border: var(--primary-light);
  --scheme-icon-accent: var(--primary);
  --scheme-art-detail: var(--secondary);
  --scheme-art-cloud: color-mix(in srgb, var(--body-bg-color) 85%, var(--scheme-accent));
}

.bg-scheme--secondary {
  --scheme-surface: var(--secondary);
  --scheme-heading: var(--heading-color);
  --scheme-text: var(--text-color);
  --scheme-muted: var(--text-color);
  --scheme-border: var(--secondary-ultra-light);

  --scheme-accent: var(--accent);

  --scheme-accent-surface: var(--accent-ultra-light);
  --scheme-accent-text: var(--accent);
  --scheme-accent-border: var(--accent-light);

  --scheme-accent-solid-surface: var(--accent);
  --scheme-accent-solid-text: var(--text-light);
  --scheme-accent-solid-border: var(--accent-semi-dark);

  --scheme-link: var(--scheme-accent);
  --scheme-link-hover: var(--accent-semi-dark);

  --scheme-icon: var(--secondary-semi-light);
  --scheme-icon-surface: var(--secondary-ultra-light);
  --scheme-icon-border: var(--secondary-light);
  --scheme-icon-accent: var(--primary);
  --scheme-art-detail: var(--primary);
}

.bg-scheme--secondary-soft {
  --scheme-surface: var(--secondary-ultra-light);
  --scheme-heading: var(--heading-color);
  --scheme-text: var(--text-color);
  --scheme-muted: var(--base-semi-light);
  --scheme-border: var(--border-color-dark);

  --scheme-accent: var(--primary);

  --scheme-accent-surface: var(--white);
  --scheme-accent-text: var(--primary);
  --scheme-accent-border: var(--secondary-light);

  --scheme-accent-solid-surface: var(--secondary);
  --scheme-accent-solid-text: var(--text-dark);
  --scheme-accent-solid-border: var(--secondary-semi-dark);

  --scheme-link: var(--scheme-accent);
  --scheme-link-hover: var(--primary-semi-dark);

  --scheme-icon: var(--secondary-semi-light);
  --scheme-icon-surface: var(--white);
  --scheme-icon-border: var(--secondary-light);
  --scheme-icon-accent: var(--secondary-semi-light);
  --scheme-art-detail: var(--primary);
  --scheme-art-cloud: color-mix(in srgb, var(--body-bg-color) 85%, var(--scheme-accent));
}



.bg-scheme--tertiary {
  --scheme-surface: var(--tertiary);
  --scheme-heading: var(--text-light);
  --scheme-text: var(--text-light-muted);
  --scheme-muted: var(--text-light-muted);
  --scheme-border: var(--tertiary-semi-dark);

  --scheme-accent: var(--secondary-light);

  --scheme-accent-surface: var(--secondary-light);
  --scheme-accent-text: var(--text-dark);
  --scheme-accent-border: var(--secondary-semi-light);

  --scheme-accent-solid-surface: var(--secondary);
  --scheme-accent-solid-text: var(--text-dark);
  --scheme-accent-solid-border: var(--secondary-semi-dark);

  --scheme-link: var(--scheme-accent);
  --scheme-link-hover: var(--secondary-ultra-light);

  --scheme-icon: var(--secondary-light);
  --scheme-icon-surface: var(--tertiary-semi-dark);
  --scheme-icon-border: var(--tertiary-light);
  --scheme-icon-accent: var(--secondary-light);
  --scheme-art-detail: var(--tertiary-light);

  --blockquote-text-color: var(--scheme-heading);
}

.bg-scheme--tertiary-soft {
  --scheme-surface: var(--tertiary-ultra-light);
  --scheme-heading: var(--heading-color);
  --scheme-text: var(--text-color);
  --scheme-muted: var(--base-semi-light);
  --scheme-border: var(--border-color-dark);

  --scheme-accent: var(--tertiary);

  --scheme-accent-surface: var(--white);
  --scheme-accent-text: var(--tertiary);
  --scheme-accent-border: var(--tertiary-light);

  --scheme-accent-solid-surface: var(--tertiary);
  --scheme-accent-solid-text: var(--text-light);
  --scheme-accent-solid-border: var(--tertiary-semi-dark);

  --scheme-link: var(--scheme-accent);
  --scheme-link-hover: var(--tertiary-semi-dark);

  --scheme-icon: var(--tertiary);
  --scheme-icon-surface: var(--white);
  --scheme-icon-border: var(--tertiary-light);
  --scheme-icon-accent: var(--tertiary);
  --scheme-art-detail: var(--secondary);
  --scheme-art-cloud: color-mix(in srgb, var(--body-bg-color) 85%, var(--scheme-accent));
}

.bg-scheme--accent-soft {
  --scheme-surface: var(--accent-ultra-light);
  --scheme-heading: var(--heading-color);
  --scheme-text: var(--text-color);
  --scheme-muted: var(--base-semi-light);
  --scheme-border: var(--border-color-dark);

  --scheme-accent: var(--accent-semi-light);

  --scheme-accent-surface: var(--white);
  --scheme-accent-text: var(--accent-semi-light);
  --scheme-accent-border: var(--accent-light);

  --scheme-accent-solid-surface: var(--accent-semi-light);
  --scheme-accent-solid-text: var(--text-light);
  --scheme-accent-solid-border: var(--accent-semi-dark);

  --scheme-link: var(--scheme-accent);
  --scheme-link-hover: var(--accent-semi-dark);

  --scheme-icon: var(--accent-semi-light);
  --scheme-icon-surface: var(--white);
  --scheme-icon-border: var(--accent-light);
  --scheme-icon-accent: var(--accent-semi-light);
  --scheme-art-detail: var(--primary);
  --scheme-art-cloud: color-mix(in srgb, var(--body-bg-color) 85%, var(--scheme-accent));
}

.bg-scheme--dark {
  --scheme-surface: var(--base);
  --scheme-heading: var(--text-light);
  --scheme-text: var(--text-light-muted);
  --scheme-muted: var(--text-light-muted);
  --scheme-border: var(--base-semi-light);

  --scheme-accent: var(--secondary-light);

  --scheme-accent-surface: var(--secondary-semi-light);
  --scheme-accent-text: var(--text-dark);
  --scheme-accent-border: var(--secondary-semi-dark);

  --scheme-accent-solid-surface: var(--secondary);
  --scheme-accent-solid-text: var(--text-dark);
  --scheme-accent-solid-border: var(--secondary-semi-dark);

  --scheme-link: var(--scheme-accent);
  --scheme-link-hover: var(--secondary-ultra-light);

  --scheme-icon: var(--base);
  --scheme-icon-surface: var(--secondary-ultra-light);
  --scheme-icon-border: var(--base-light);
  --scheme-icon-accent: var(--secondary-light);
  --scheme-art-detail: var(--primary-light);

  --blockquote-text-color: var(--scheme-heading);
}


/* =========================================================
   Scheme-aware button variants
   Use inside strong bg-scheme areas where normal ACSS/global
   button variants may not reliably contrast with the surface.
   ========================================================= */

.bg-button.btn--scheme-accent {
  background-color: var(--scheme-accent-solid-surface);
  color: var(--scheme-accent-solid-text);
  border-color: var(--scheme-accent-solid-surface);
}

.bg-button.btn--scheme-accent:hover,
.bg-button.btn--scheme-accent:focus-visible {
  background-color: var(--scheme-accent-surface);
  color: var(--scheme-accent-text);
  border-color: var(--scheme-accent-surface);
}

.bg-button.btn--scheme-accent-outline {
  background-color: transparent;
  color: var(--scheme-accent);
  border-color: var(--scheme-accent);
}

.bg-button.btn--scheme-accent-outline:hover,
.bg-button.btn--scheme-accent-outline:focus-visible {
  background-color: var(--scheme-accent-solid-surface);
  color: var(--scheme-accent-solid-text);
  border-color: var(--scheme-accent-solid-surface);
}


/* =========================================================
   BeanGrower Tone Colours
   For small reusable items: icons, badges, pills, labels,
   stat markers and simple highlight chips.

   Structure:
   1) --tone-[name]-[part] variables = single source of truth
   2) .bg-tone applies the active tone
   3) .bg-tone--[name] chooses which tone values to use
   ========================================================= */

:root {
  /* Review stars */
  --bg-review-stars-color: #f5b400;

  /* Primary - soft */
  --tone-primary-surface: var(--primary-ultra-light);
  --tone-primary-text: var(--primary);
  --tone-primary-border: var(--primary-light);

  /* Primary - solid */
  --tone-primary-solid-surface: var(--primary);
  --tone-primary-solid-text: var(--text-light);
  --tone-primary-solid-border: var(--primary-semi-dark);

  /* Secondary - soft */
  --tone-secondary-surface: var(--secondary-ultra-light);
  --tone-secondary-text: var(--secondary-semi-light);
  --tone-secondary-border: var(--secondary-light);

  /* Secondary - solid */
  --tone-secondary-solid-surface: var(--secondary);
  --tone-secondary-solid-text: var(--text-dark);
  --tone-secondary-solid-border: var(--secondary-semi-dark);

  /* Tertiary - soft */
  --tone-tertiary-surface: var(--tertiary-ultra-light);
  --tone-tertiary-text: var(--tertiary);
  --tone-tertiary-border: var(--tertiary-light);

  /* Tertiary - solid */
  --tone-tertiary-solid-surface: var(--tertiary);
  --tone-tertiary-solid-text: var(--text-light);
  --tone-tertiary-solid-border: var(--tertiary-semi-dark);

  /* Accent colour - soft */
  --tone-accent-surface: var(--accent-ultra-light);
  --tone-accent-text: var(--accent);
  --tone-accent-border: var(--accent-light);

  /* Accent colour - solid */
  --tone-accent-solid-surface: var(--accent-semi-light);
  --tone-accent-solid-text: var(--text-light);
  --tone-accent-solid-border: var(--accent-semi-dark);

  /* Base colour - soft */
  --tone-base-surface: var(--base-ultra-light);
  --tone-base-text: var(--base);
  --tone-base-border: var(--base-light);

  /* Base colour - solid */
  --tone-base-solid-surface: var(--base-semi-light);
  --tone-base-solid-text: var(--text-light);
  --tone-base-solid-border: var(--base-semi-dark);

  /* Dark base with secondary accent text */
  --tone-base-accent-surface: var(--base);
  --tone-base-accent-text: var(--secondary-light);
  --tone-base-accent-border: var(--base-semi-dark);

  /* Generic soft tone */
  --tone-soft-surface: var(--neutral-ultra-light);
  --tone-soft-text: var(--text-color);
  --tone-soft-border: var(--border-color-dark);
}

/* Applies the currently selected tone */
.bg-tone {
  background-color: var(--tone-surface);
  color: var(--tone-text);
  border-color: var(--tone-border);
}

/* Scheme-owned soft accent tone.
   Use inside bg-scheme areas when the accent needs to work with the active scheme. */
.bg-tone--scheme-accent {
  --tone-surface: var(--scheme-accent-surface);
  --tone-text: var(--scheme-accent-text);
  --tone-border: var(--scheme-accent-border);
}

/* Scheme-owned solid accent tone.
   Use inside bg-scheme areas for stronger accent badges, chips or icons. */
.bg-tone--scheme-accent-solid {
  --tone-surface: var(--scheme-accent-solid-surface);
  --tone-text: var(--scheme-accent-solid-text);
  --tone-border: var(--scheme-accent-solid-border);
}

/* Generic soft */
.bg-tone--soft {
  --tone-surface: var(--tone-soft-surface);
  --tone-text: var(--tone-soft-text);
  --tone-border: var(--tone-soft-border);
}

/* Primary - soft */
.bg-tone--primary {
  --tone-surface: var(--tone-primary-surface);
  --tone-text: var(--tone-primary-text);
  --tone-border: var(--tone-primary-border);
}

/* Primary - solid */
.bg-tone--primary-solid {
  --tone-surface: var(--tone-primary-solid-surface);
  --tone-text: var(--tone-primary-solid-text);
  --tone-border: var(--tone-primary-solid-border);
}

/* Secondary - soft */
.bg-tone--secondary {
  --tone-surface: var(--tone-secondary-surface);
  --tone-text: var(--tone-secondary-text);
  --tone-border: var(--tone-secondary-border);
}

/* Secondary - solid */
.bg-tone--secondary-solid {
  --tone-surface: var(--tone-secondary-solid-surface);
  --tone-text: var(--tone-secondary-solid-text);
  --tone-border: var(--tone-secondary-solid-border);
}

/* Tertiary - soft */
.bg-tone--tertiary {
  --tone-surface: var(--tone-tertiary-surface);
  --tone-text: var(--tone-tertiary-text);
  --tone-border: var(--tone-tertiary-border);
}

/* Tertiary - solid */
.bg-tone--tertiary-solid {
  --tone-surface: var(--tone-tertiary-solid-surface);
  --tone-text: var(--tone-tertiary-solid-text);
  --tone-border: var(--tone-tertiary-solid-border);
}

/* Accent colour - soft */
.bg-tone--accent {
  --tone-surface: var(--tone-accent-surface);
  --tone-text: var(--tone-accent-text);
  --tone-border: var(--tone-accent-border);
}

/* Accent colour - solid */
.bg-tone--accent-solid {
  --tone-surface: var(--tone-accent-solid-surface);
  --tone-text: var(--tone-accent-solid-text);
  --tone-border: var(--tone-accent-solid-border);
}

/* Base colour - soft */
.bg-tone--base {
  --tone-surface: var(--tone-base-surface);
  --tone-text: var(--tone-base-text);
  --tone-border: var(--tone-base-border);
}

/* Base colour - solid */
.bg-tone--base-solid {
  --tone-surface: var(--tone-base-solid-surface);
  --tone-text: var(--tone-base-solid-text);
  --tone-border: var(--tone-base-solid-border);
}

/* Dark base with secondary accent text */
.bg-tone--base-accent {
  --tone-surface: var(--tone-base-accent-surface);
  --tone-text: var(--tone-base-accent-text);
  --tone-border: var(--tone-base-accent-border);
}
.bg-test{color:red;}

.bg-tax-article__eyebrow {
  color: var(--primary);
}

.bg-tax-article__title {
  color: var(--primary);
}

/* Reusable icon tones: inherit a scheme or select a fixed ACSS palette. */
/* Compatibility for older Hero slots; new/edited slots use the named class. */
:where(.bg-hero__eyebrow):not([class*="bg-tone--"]),
.bg-tone--scheme-icon {
  --tone-surface: var(--scheme-icon-surface);
  --tone-text: var(--scheme-icon);
  --tone-border: var(--scheme-icon-border);
}

.bg-tone--scheme-icon-solid {
  --tone-surface: var(--scheme-icon);
  --tone-text: var(--scheme-icon-surface);
  --tone-border: var(--scheme-icon-border);
}

.bg-tone--scheme-icon-body {
  --tone-surface: var(--body-bg-color);
  --tone-text: var(--scheme-icon);
  --tone-border: var(--scheme-icon-border);
}

.bg-tone--primary-body {
  --tone-surface: var(--body-bg-color);
  --tone-text: var(--primary);
  --tone-border: var(--primary-light);
}

.bg-tone--neutral-translucent {
  --tone-surface: color-mix(in srgb, var(--white) 72%, transparent);
  --tone-text: var(--neutral-semi-dark);
  --tone-border: color-mix(in srgb, var(--neutral) 14%, transparent);
}

.bg-tone--primary-subtle {
  --tone-surface: color-mix(in srgb, var(--white) 72%, var(--primary-ultra-light));
  --tone-text: var(--primary);
  --tone-border: var(--primary-ultra-light);
}