/*
  Sowghati semantic contrast guard.
  Text placed on light/dark/image surfaces must use these tokens rather than decorative golds.
  `npm test` runs scripts/contrast-test.mjs and blocks production if the audited pairs fall below WCAG AA 4.5:1.
*/

:root {
  --a11y-text-on-light: #3b2717;
  --a11y-muted-on-light: #72573b;
  --a11y-accent-on-light: #6a4315;
  --a11y-brand-on-light: #7a4d10;
  --a11y-text-on-dark: #f2dfbd;
  --a11y-text-on-image: #fff4dd;

  /* Conservative audit surfaces. These are intentionally opaque approximations of the real surfaces. */
  --a11y-surface-light: #fff2dc;
  --a11y-surface-light-2: #f8e7ca;
  --a11y-surface-dark: #0b1719;
  --a11y-surface-image-scrim: #0b2629;
}

/* Linked city/product cards keep their visual behavior while becoming real crawlable destinations. */
a.city-card,
a.product-card {
  display: block;
  color: inherit;
  text-decoration: none;
}
a.city-card:focus-visible,
a.product-card:focus-visible {
  outline: 3px solid var(--gold2, #ead08e);
  outline-offset: 4px;
}

/* Light-theme brand text must never use pale decorative gold. */
html[data-mode="light"] .brand {
  color: var(--a11y-brand-on-light) !important;
}

/* Decorative gold is fine as ornament; readable headings on pale cards need semantic foregrounds. */
html[data-mode="light"] .value-card h3,
html[data-mode="light"] .person b {
  color: var(--a11y-accent-on-light) !important;
}

/* Anything rendered directly on photography keeps a dedicated on-image foreground. */
html[data-mode="light"] .city-copy h3,
html[data-mode="dark"] .city-copy h3 {
  color: var(--a11y-text-on-image) !important;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .46);
}

html[data-mode="light"] .city-copy p,
html[data-mode="dark"] .city-copy p {
  color: #f5dfb7 !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .42);
}

/* Keep ordinary light-surface reading text on semantic foregrounds. */
html[data-mode="light"] .lead,
html[data-mode="light"] .product-body p,
html[data-mode="light"] .guide-card p,
html[data-mode="light"] .value-card p,
html[data-mode="light"] .person p {
  color: var(--a11y-muted-on-light);
}

/* Sponsor inventory is a recurring light-surface component and is explicitly bound to audited tokens. */
.ad-slot__eyebrow { color: var(--a11y-brand-on-light) !important; }
.ad-slot strong { color: var(--a11y-text-on-light) !important; }
.ad-slot p { color: var(--a11y-muted-on-light) !important; }
.ad-slot__cta { color: var(--a11y-accent-on-light) !important; }

/* Editorial trust uses the existing audited opaque light-surface pairs. */
.editorial-trust { margin-block:28px; padding:16px 20px; border:1px solid currentColor; border-radius:16px; background:var(--a11y-surface-light); color:var(--a11y-text-on-light); }
.editorial-trust p { margin-block:8px; }
.editorial-trust a { color:var(--a11y-accent-on-light); overflow-wrap:anywhere; }
.editorial-trust a:focus-visible { outline:3px solid currentColor; outline-offset:4px; }