/* vanilla-cookieconsent defines its ``--cc-*`` tokens on ``#cc-main`` (and a
   ``#cc-main.cc--darkmode`` variant) \002014 higher specificity than ``:root``, so a
   ``:root`` override is shadowed inside the banner (the primary button kept the
   library's white text on the site-accent bg \002192 WCAG-AA contrast FAIL, e.g.
   white on #ff3b46 = 3.2:1). Target ``#cc-main`` (+ darkmode) so our tokens win,
   and keep ``:root`` for any token the library reads there. */
#cc-main, #cc-main.cc--darkmode, :root {
  /* Phase II sites expose ``--bg-page`` / ``--text-primary`` /
     ``--text-muted``; legacy / imported sites expose ``--bg`` /
     ``--text``. Each var below tries the new name first and falls
     back to the legacy name so both worlds work without per-site
     overrides. */
  --cc-bg: var(--bg-card, var(--bg-elevated, #fff));
  --cc-primary-color: var(--text-primary, var(--text, #0a0a0a));
  --cc-secondary-color: var(--text-muted, #6a6a6a);

  /* Primary button: site accent background + contrasting text from
     the site's design tokens. Source of truth is ``--accent-fg``,
     emitted into every Phase II site's ``app/globals.css`` :root by
     ``preview_claude_renderer._write_skeleton`` (Python computes the
     contrast HEX from the accent's W3C luminance via
     ``services/color_utils.pick_text_color``). Existing sites get the
     token backfilled by ``deterministic_fixers.ensure_accent_fg_token``
     on the next rebuild. The CSS-side fallback only triggers for
     legacy / imported sites that have neither ``--accent-fg`` nor
     ``--text-primary`` \002014 at that point the safest readable option is
     the site's body-text colour. */
  --cc-btn-primary-bg: var(--accent, #0a0a0a);
  --cc-btn-primary-color: var(--accent-fg, var(--text-primary, var(--text, #fafafa)));
  --cc-btn-primary-hover-bg: var(--accent-hover, var(--accent-alt, var(--accent, #222)));
  --cc-btn-primary-hover-color: var(--accent-fg, var(--text-primary, var(--text, #fafafa)));
  --cc-btn-primary-border-color: var(--accent, #0a0a0a);

  /* Secondary button: transparent / bordered style so Reject all is
     clearly distinguished from Accept all without being the same
     bright accent. */
  --cc-btn-secondary-bg: transparent;
  --cc-btn-secondary-color: var(--text-primary, var(--text, #0a0a0a));
  --cc-btn-secondary-border-color: var(--border, #e5e5e5);
  --cc-btn-secondary-hover-bg: var(--bg-elevated, rgba(127,127,127,0.1));
  --cc-btn-secondary-hover-color: var(--text-primary, var(--text, #0a0a0a));

  --cc-toggle-bg-off: var(--border, #cfcfcf);
  --cc-toggle-bg-on: var(--accent, #0a0a0a);
  --cc-toggle-knob-bg: #fff;
  --cc-cookie-category-block-bg: var(--bg-elevated, #f7f7f7);
  --cc-cookie-category-block-border: var(--border, #e5e5e5);
  --cc-cookie-category-block-hover-bg: var(--bg-hover, #ececec);
  --cc-section-border: var(--border, #e5e5e5);
  --cc-overlay-bg: rgba(0, 0, 0, 0.55);
}