/*
 * Consent banner — SKIN.
 *
 * This is the file you edit per project. `consent-banner.css` is structure and
 * stays byte-identical to the library forever (THEMING.md).
 *
 * Values are scoped to the element's own root classes rather than :root, so a
 * host app that happens to define --surface or --border cannot leak into the
 * component. That scoping is the whole point of this file — do not "simplify"
 * it to :root.
 */

.sp-consent,
.sp-consent-prefs {
  /* Soft Product ink ladder */
  --ink: #292929;
  --ink-muted: #5d5d5d;
  --ink-faint: #9e9e9e;
  --surface: #ffffff;
  --surface-subtle: #f7f7f7;
  --surface-hover: #f3f3f3;
  --border: #e5e5e5;

  /* Geometry — locked */
  --radius-nav: 8px;
  --radius-card: 16px;
  --radius-panel: 24px;
  --radius-pill: 9999px;

  /* Type — locked */
  --font-ui: "SF Pro Text", "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tracking-ui: -0.15px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-lg: 24px;

  /* Motion — named curves, never invented per project */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --dur-instant: 150ms;
  --dur-quick: 200ms;
  --dur-enter: 340ms;
  --dur-exit: 260ms;

  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.08);

  /* ---------------------------------------------------------------------
     THE BRANDABLE ONES. In most projects you change --sp-consent-accent and
     stop. Everything above is the design language and should not move.
     --------------------------------------------------------------------- */

  /* Fill of "Accept all" and the checked switch track. Soft Product default is
     near-black rather than the blue accent: consent is chrome, not a feature,
     and a saturated CTA here reads as pressure. */
  --sp-consent-accent: #292929;
  --sp-consent-accent-ink: #ffffff;

  /* Focus ring. Keep it the brand accent — it must be visible, not tasteful. */
  --sp-consent-focus: #3b82f6;

  /* Switch track when off. */
  --sp-consent-track: #d8d8d8;

  /* Backdrop behind the preferences dialog. */
  --sp-consent-scrim: rgba(20, 20, 22, 0.45);

  /* The bar itself. Defaults to a normal Soft Product card. Override this
     group — and only this group — for the dark-bar treatment. */
  --sp-consent-bar-surface: #ffffff;
  --sp-consent-bar-ink: #292929;
  --sp-consent-bar-ink-muted: #5d5d5d;
  --sp-consent-bar-border: #e5e5e5;
  --sp-consent-bar-hover: #f3f3f3;
}

/* Dark is a variant, not a second design language: same geometry, same type,
   one accent. Only the ink ladder and surfaces move. */
:root.dark .sp-consent,
:root.dark .sp-consent-prefs,
[data-theme="dark"] .sp-consent,
[data-theme="dark"] .sp-consent-prefs {
  --ink: #ededed;
  --ink-muted: #a5a5a5;
  --ink-faint: #767676;
  --surface: #1c1c1e;
  --surface-subtle: #161618;
  --surface-hover: #252528;
  --border: #2c2c2f;
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.5);

  --sp-consent-accent: #ededed;
  --sp-consent-accent-ink: #1c1c1e;
  --sp-consent-track: #3a3a3d;
  --sp-consent-scrim: rgba(0, 0, 0, 0.6);

  --sp-consent-bar-surface: #1c1c1e;
  --sp-consent-bar-ink: #ededed;
  --sp-consent-bar-ink-muted: #a5a5a5;
  --sp-consent-bar-border: #2c2c2f;
  --sp-consent-bar-hover: #252528;
}

/*
 * ---------------------------------------------------------------------------
 * WORKED EXAMPLE — a dark bar with a lime CTA on a light site.
 *
 * This is the whole per-brand diff. Note what it does NOT touch: no radii, no
 * type sizes, no padding, no class renames. Copy this block, change the two
 * colours, delete the rest.
 * ---------------------------------------------------------------------------
 *
 * .sp-consent {
 *   --sp-consent-bar-surface: #101418;
 *   --sp-consent-bar-ink: #f3f4f6;
 *   --sp-consent-bar-ink-muted: #d0d4d9;
 *   --sp-consent-bar-border: #3a4048;
 *   --sp-consent-bar-hover: #1b2026;
 *   --sp-consent-accent: #a3e635;
 *   --sp-consent-accent-ink: #171717;
 * }
 */

/* GBE brand — greatbritishenergy.com. Accent is the site green on both
   surfaces; the bar sits on the site's paper tone with navy ink. */
.sp-consent,
.sp-consent-prefs {
  --sp-consent-accent: #268f00;
  --sp-consent-accent-ink: #ffffff;
  --sp-consent-bar-surface: #fffef9;
  --sp-consent-bar-ink: #0a1530;
  --sp-consent-bar-ink-muted: #3a4160;
  --sp-consent-bar-border: #e7e4db;
  --sp-consent-bar-hover: #f5f3ee;
}

/* GBE: thin brand-green ring on the secondary (Essential only) button, and
   link styling for the inline Manage cookies control injected via bannerLinks
   copy (our own element, not library structure). Colour-only overrides. */
.sp-consent .sp-consent__secondary { border-color: #268f00; }
.gbe-manage-inline {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; text-decoration: underline; cursor: pointer;
}