/* opti-pipe shared color palette.

   Single source of truth for every page (marketing/index.html,
   marketing/upload-guide.html, dashboard/index.html) so the site and the
   dashboard don't drift into slightly-different shades of the same
   brand over time - which had already happened once (dashboard/index.html
   had grown its own independent :root block with different hex values
   for the same tokens before this file existed).

   Dark-first: :root is the dark palette, light mode is the override, via
   two paths - prefers-color-scheme for visitors who haven't chosen, and an
   explicit [data-theme] attribute for the manual light/dark toggle each
   page's nav bar carries (see the "Manual light/dark toggle" script block
   near the top of each page's <head> - it sets the attribute from
   localStorage before first paint, so there's no flash of the wrong theme,
   and the toggle button itself flips it at runtime).

   Decorative, page-specific values (the marketing hero's star-field
   gradients) deliberately stay local to the pages that use them,
   not here - this file is the palette, not every visual.

   Neutrals are true black/white/gray (no blue-navy tint, as this file
   had before) - the site's only color is --accent, used deliberately
   sparingly (CTAs, links, one letter of the wordmark) so it still reads
   as an accent and not just "the site's color scheme."
*/
:root {
  --bg: #0a0a0c;
  --panel: #131316;
  --panel-2: #1c1c20;
  --border: #2a2a2f;
  --text: #f5f5f7;
  --muted: #9b9ba3;
  --accent: #5b8cff;
  --ok: #38c977;
  --warning: #e0a52c;
  --critical: #f2555c;
  --info: #5b8cff;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f7f7f8;
    --panel: #ffffff;
    --panel-2: #f0f0f2;
    --border: #e3e3e6;
    --text: #0a0a0c;
    --muted: #6b6b72;
  }
}
:root[data-theme="dark"] {
  --bg: #0a0a0c;
  --panel: #131316;
  --panel-2: #1c1c20;
  --border: #2a2a2f;
  --text: #f5f5f7;
  --muted: #9b9ba3;
}
:root[data-theme="light"] {
  --bg: #f7f7f8;
  --panel: #ffffff;
  --panel-2: #f0f0f2;
  --border: #e3e3e6;
  --text: #0a0a0c;
  --muted: #6b6b72;
}

/* Accessibility toolbar overrides (marketing/a11y.js adds/removes these
   classes on <html> and persists the choice to localStorage under
   "optiPipeA11y"; each page's own inline flash-prevention script applies
   them again before first paint, same pattern as the dark/light toggle
   above). Placed after both [data-theme] blocks so :root.a11y-contrast
   wins regardless of dark/light mode - same specificity, later source
   order wins.

   Since virtually every color on the site already routes through these
   custom properties, overriding them here gets broad, consistent
   high-contrast coverage for free, rather than needing a second set of
   overrides scattered across every page's own <style> block. */
:root.a11y-contrast {
  --bg: #ffffff;
  --panel: #ffffff;
  --panel-2: #ffffff;
  --border: #000000;
  --text: #000000;
  --muted: #000000;
  --accent: #000000;
  --ok: #000000;
  --warning: #000000;
  --critical: #000000;
  --info: #000000;
}
:root.a11y-contrast a,
:root.a11y-underline-links a {
  text-decoration: underline !important;
}

/* zoom, not a :root { font-size } percentage: this site's type scale is
   almost entirely px-based (clamp(), explicit px sizes) rather than
   rem, so scaling the root font size wouldn't visibly resize most text.
   zoom scales the whole rendered box model regardless of the underlying
   unit - supported in every evergreen browser; on anything that doesn't
   support it, the toggle is a harmless no-op rather than a broken
   layout. */
:root.a11y-text-lg body {
  zoom: 1.15;
}
:root.a11y-text-xl body {
  zoom: 1.3;
}

:root.a11y-reduce-motion *,
:root.a11y-reduce-motion *::before,
:root.a11y-reduce-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

/* The toolbar widget itself (button + panel) - kept here rather than
   inline in a11y.js so it's themed consistently and never flashes
   unstyled before the script runs. */
#a11y-toolbar {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 500;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
#a11y-toggle-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
:root.a11y-contrast #a11y-toggle-btn {
  border: 2px solid #ffffff;
}
#a11y-toggle-btn:hover {
  filter: brightness(1.1);
}
#a11y-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  width: 230px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 16px 30px -10px rgba(15, 23, 42, 0.35);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#a11y-panel[hidden] {
  display: none;
}
.a11y-panel-head {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 4px 8px 8px;
}
.a11y-opt,
#a11y-reset {
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 8px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
}
.a11y-opt:hover,
#a11y-reset:hover {
  background: var(--panel-2);
}
.a11y-opt.a11y-active {
  background: var(--panel-2);
  border-color: var(--accent);
  font-weight: 600;
}
#a11y-reset {
  color: var(--muted);
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding-top: 10px;
}
@media (max-width: 700px) {
  #a11y-toolbar {
    right: 14px;
    bottom: 14px;
  }
}

/* Cookie-consent banner (injected by /cookie-consent.js on every page).
   Bottom-left so it never collides with the bottom-right a11y toolbar
   above. Styled here, not inline in the script, for the same reason as
   the a11y toolbar: themed consistently, no flash of unstyled content. */
#op-cookie-banner {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 600;
  max-width: 380px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  padding: 18px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
#op-cookie-banner p {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text);
}
#op-cookie-banner p a {
  color: var(--accent);
}
#op-cookie-banner .op-cookie-actions {
  display: flex;
  gap: 10px;
}
#op-cookie-banner button {
  flex: 1;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
#op-cookie-banner .op-cookie-accept {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
}
#op-cookie-banner .op-cookie-accept:hover {
  filter: brightness(1.08);
}
#op-cookie-banner .op-cookie-reject {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
#op-cookie-banner .op-cookie-reject:hover {
  background: var(--panel-2);
}
:root.a11y-contrast #op-cookie-banner {
  border-width: 2px;
}
@media (max-width: 700px) {
  #op-cookie-banner {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
  }
}