/*
  Lequent design-system overrides for the Silktide Consent Manager.
  Loaded AFTER silktide-consent-manager.css so these win on source order.
  References --lq-* and --font-* tokens defined on :root in globals.css.

  Enforces: zero border-radius on chrome, 0.5px hairline borders, no blurred
  box-shadows, Space Grotesk / JetBrains Mono, and signal (#8DFFF4) used
  sparingly — only the primary accept CTA, the toggle on-state, and focus rings.
*/

#stcm-wrapper {
  --fontFamily: var(--font-heading);
  --primaryColor: var(--lq-signal);
  --backgroundColor: var(--lq-carbon);
  --textColor: var(--lq-vapor);
  --backdropBackgroundColor: var(--lq-glass-bg);
  --backdropBackgroundBlur: 4px;
}

/* ---- Surfaces: zero radius, hairline, no blur shadow ---- */
#stcm-wrapper #stcm-banner,
#stcm-wrapper #stcm-modal {
  border-radius: 0;
  box-shadow: none;
  border: 0.5px solid var(--lq-hairline-strong);
}

#stcm-wrapper #stcm-banner:focus {
  border-radius: 0;
}

/* ---- Buttons: square, hairline ---- */
#stcm-wrapper .stcm-button {
  border-radius: 0;
  border-width: 0.5px;
}

/* Primary CTA (Accept / Save) — the single signal element per surface */
#stcm-wrapper .stcm-accept-all,
#stcm-wrapper .stcm-modal-save {
  background-color: var(--lq-signal);
  border: 0.5px solid var(--lq-signal);
  color: var(--lq-carbon);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
}

#stcm-wrapper .stcm-accept-all:hover,
#stcm-wrapper .stcm-modal-save:hover {
  background-color: var(--lq-signal-dim);
  border-color: var(--lq-signal-dim);
  color: var(--lq-carbon);
}

/* Reject — secondary: transparent + hairline, vapor text (not signal) */
#stcm-wrapper .stcm-reject-all,
#stcm-wrapper .stcm-modal-reject-all {
  background-color: transparent;
  border: 0.5px solid var(--lq-hairline-strong);
  color: var(--lq-vapor);
}

#stcm-wrapper .stcm-reject-all:hover,
#stcm-wrapper .stcm-modal-reject-all:hover {
  background-color: transparent;
  border-color: var(--lq-hairline-focus);
  color: var(--lq-vapor);
}

/* ---- Ghost links: vapor/whisper, not signal ---- */
#stcm-wrapper #stcm-banner .stcm-preferences-button {
  color: var(--lq-vapor-dim);
}

#stcm-wrapper #stcm-banner .stcm-preferences-button span:hover {
  color: var(--lq-vapor);
}

#stcm-wrapper #stcm-banner a.stcm-logo {
  fill: var(--lq-whisper);
}

#stcm-wrapper #stcm-modal footer a.stcm-credit-link {
  color: var(--lq-whisper);
}

#stcm-wrapper #stcm-modal footer a.stcm-credit-link:hover {
  color: var(--lq-vapor-dim);
}

/* ---- Typography ---- */
#stcm-wrapper #stcm-modal h1 {
  font-weight: 400;
  letter-spacing: -0.01em;
}

#stcm-wrapper #stcm-modal legend {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  font-weight: 500;
  color: var(--lq-whisper);
}

/* ---- Cookie icon: carbon chrome, not a persistent signal blob ---- */
#stcm-wrapper #stcm-icon {
  border-radius: 0;
  background-color: var(--lq-carbon-raised);
  border: 0.5px solid var(--lq-hairline-strong);
  box-shadow: none;
}

#stcm-wrapper #stcm-icon:hover {
  border-color: var(--lq-hairline-focus);
}

#stcm-wrapper #stcm-icon svg {
  fill: var(--lq-vapor-dim);
}

#stcm-wrapper #stcm-icon:focus {
  border-radius: 0;
}

/* ---- Focus rings: signal, square ---- */
#stcm-wrapper a:focus,
#stcm-wrapper #stcm-banner button:focus,
#stcm-wrapper #stcm-modal button:focus,
#stcm-wrapper #stcm-icon:focus {
  box-shadow: 0 0 0 2px var(--lq-carbon), 0 0 0 3px var(--lq-signal);
  border-radius: 0;
}

/* ---- Toggle: keep the thumb circle (allowed exception); square the focus ring ---- */
#stcm-wrapper #stcm-modal .stcm-toggle:focus-within {
  box-shadow: 0 0 0 2px var(--lq-carbon), 0 0 0 3px var(--lq-signal);
  border-radius: 25px;
}