/* ── SautiPBX brand tokens as CSS variables ─────────────────────────────
   Mirrors templates/partials/_theme.html. That partial feeds Tailwind's
   `brand-*` classes; these variables serve the plain <style> blocks that
   Tailwind never sees - the docs prose, code cards, and landing sections.
   Keep the two in step. Emails cannot use these (Gmail strips them), so
   templates/emails/ carries literal hex values on purpose.
   ------------------------------------------------------------------- */
:root {
  --brand-50:  #f0fdfa;
  --brand-100: #ccfbf1;
  --brand-200: #99f6e4;
  --brand-300: #5eead4;
  --brand-400: #13c7b7;   /* the pack teal - accents only, never white text */
  --brand-500: #0d9488;
  --brand-600: #0f766e;   /* buttons - white text is 5.47:1, passes AA */
  --brand-700: #115e59;
  --brand-800: #134e4a;
  --brand-900: #121a2b;

  --ink:   #121a2b;       /* Ink navy - wordmark, dark chrome */
  --night: #0b1020;       /* Night navy - dark backgrounds */
}

[data-table-scroll] {
  box-shadow: inset -14px 0 12px -14px rgb(15 23 42 / 0.35);
  scrollbar-width: thin;
  scrollbar-color: rgb(148 163 184) transparent;
}

dialog[data-page-jump]::backdrop {
  background: rgb(15 23 42 / 0.5);
  backdrop-filter: blur(2px);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}