/* Native ACSS owns ordinary backgrounds, foregrounds, links, buttons and icons.
   These are the remaining design exceptions and artwork/logo adapters.
   No replacement scheme/tone palette is defined here. */
:root {
  /* Stable soft Primary: follows ACSS hue without regenerated shade intensity. */
  --bg-primary-soft: oklch(from var(--primary) 0.95 0.02 h);
  --bg-review-stars-color: #f5b400;
  /* Label ink only: each soft accent follows its own native ACSS family. */
  --bg-soft-primary-text: var(--primary-semi-dark);
  --bg-soft-secondary-text: var(--secondary-semi-dark);
  --bg-soft-tertiary-text: var(--tertiary-semi-dark);
  /* Existing Secondary shade workaround, shared by soft utilities and component roles. */
  --bg-secondary-soft: oklch(from var(--secondary) 0.95 calc(c * 0.5) h);
}
:where(.bg--ultra-light) { --bg-decoration-surface: var(--bg-ultra-light); --bg-brand-accent: var(--primary); --bg-accent-on-solid: var(--text-light); --bg-logo-light: inline-flex; --bg-logo-dark: none; }
:where(.bg--light) { --bg-decoration-surface: var(--bg-light); --bg-brand-accent: var(--primary); --bg-accent-on-solid: var(--text-light); --bg-logo-light: inline-flex; --bg-logo-dark: none; }
:where(.bg--dark) { --bg-decoration-surface: var(--bg-dark); --bg-brand-accent: var(--primary-light); --bg-accent-on-solid: var(--text-dark); --bg-logo-light: none; --bg-logo-dark: inline-flex; }
:where(.bg--ultra-dark) { --bg-decoration-surface: var(--bg-ultra-dark); --bg-brand-accent: var(--primary-light); --bg-accent-on-solid: var(--text-dark); --bg-logo-light: none; --bg-logo-dark: inline-flex; }
:where(.surface-panel) {
  /* Native ACSS owns the fill and foregrounds; these values serve component decoration and logo selection. */
  --bg-decoration-surface: var(--surface-background-color, var(--surface-1-background-color));
  --bg-brand-accent: var(--primary);
  --bg-accent-on-solid: var(--text-light);
  --bg-logo-light: inline-flex;
  --bg-logo-dark: none;
}
.bg-surface-wash { --bg-decoration-surface: color-mix(in srgb, var(--bg-light) 45%, var(--body-bg-color)); background-color: var(--bg-decoration-surface); }
/* Solid brand fills and foregrounds belong to native ACSS Surfaces.
   These adapters only supply existing component decoration. */
:where(.surface-primary, .surface-secondary, .surface-tertiary) {
  --bg-brand-accent: var(--relative-heading-color);
}

/* Use these with bg--ultra-light. ACSS owns foreground relationships. */
.bg-soft-primary {
  --bg-decoration-surface: var(--bg-primary-soft);
  background-color: var(--bg-decoration-surface);
}
.bg-soft-secondary {
  /* Temporary workaround: native Secondary shades retained an old hue
     after a hex change. Derive from the current main colour until fixed. */
  --bg-decoration-surface: var(--bg-secondary-soft);
  background-color: var(--bg-decoration-surface);
}
.bg-soft-tertiary {
  --bg-decoration-surface: var(--tertiary-ultra-light);
  background-color: var(--bg-decoration-surface);
}

:where(.surface-primary) { --bg-decoration-surface: var(--surface-background-color, var(--surface-3-background-color)); }
:where(.surface-secondary) { --bg-decoration-surface: var(--surface-background-color, var(--surface-2-background-color)); }
:where(.surface-tertiary) { --bg-decoration-surface: var(--surface-background-color, var(--surface-4-background-color)); }

/* Capture native Icon controls at the root before contextual link mappings.
   These aliases follow ACSS settings; they are not a second colour palette. */
:root {
  --bg-boxed-icon-color: var(--icon-color);
  --bg-boxed-icon-color-hover: var(--icon-color-hover);
}

/* Icon colour contract: ordinary icons share the nearest native accent/link
   foreground. This is a design decision, independent of Surface icon schemes.
   A nested background establishes its own pairing; deliberate component roles
   and self-contained icon badges may supply their own foreground. */
:is(.bg--ultra-light, .bg--light, .bg--dark, .bg--ultra-dark,
       .surface-panel, .surface-primary, .surface-secondary, .surface-tertiary) {
  --icon-scheme: inherit;
  --icon-color: var(--relative-link-color, var(--link-color));
  --icon-color-hover: var(--relative-link-color-hover, var(--link-color-hover));
}

/* ACSS 4 Studio currently emits heading selectors that also match the
   surface container itself. Keep ordinary container text on the selected
   Text relationship; headings, links, buttons and icons retain their own rules. */
:is(.bg--ultra-light, .bg--light, .bg--dark, .bg--ultra-dark, .surface-panel, .surface-primary, .surface-secondary, .surface-tertiary):where(:not(h1, h2, h3, h4, h5, h6, a, button, svg, .bg-icon, [class*="btn--"])) {
  color: var(--relative-text-color, inherit);
}

/* A heading can itself carry a native background relationship. */
:is(.bg--ultra-light, .bg--light, .bg--dark, .bg--ultra-dark, .surface-panel, .surface-primary, .surface-secondary, .surface-tertiary):is(h1, h2, h3, h4, h5, h6) {
  color: var(--relative-heading-color, var(--heading-color));
}