/* Digital Brings Labs — shared foundation.
   Brand look lives in each product's own stylesheet via these variables:
   --bg --surface --ink --muted --line --accent --accent-ink --font-display --font-ui --font-mono */

:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --t-press: 140ms;
  --t-fast: 180ms;
  --t-ui: 240ms;
  --t-slow: 520ms;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;

  --bg: #fff;
  --surface: #fff;
  --ink: #111;
  --muted: #666;
  --line: rgba(0, 0, 0, 0.1);
  --accent: #111;
  --accent-ink: #fff;
  --font-display: Georgia, serif;
  --font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--accent); color: var(--accent-ink); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.wrap { width: min(1200px, 100% - 40px); margin-inline: auto; }
.mono { font-family: var(--font-mono); font-feature-settings: 'tnum' 1, 'zero' 1; }
.tnum { font-variant-numeric: tabular-nums; }

/* Pressable — every clickable surface confirms the press. */
.press { transition: transform var(--t-press) var(--ease-out); }
.press:active { transform: scale(0.97); }

/* Reveal — only applied by motion.js to elements below the fold.
   Content is visible without JS, in ?static mode, and after a failsafe. */
.reveal-armed { opacity: 0; transform: translateY(14px); filter: blur(4px); }
.reveal-in {
  opacity: 1; transform: none; filter: none;
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out), filter 700ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

/* Toasts */
.toasts {
  position: fixed; z-index: 1000; right: 20px; bottom: 20px;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.toast {
  pointer-events: auto;
  min-width: 260px; max-width: 360px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--ink); color: var(--bg);
  font-size: 14px; line-height: 1.4;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.35);
  display: flex; gap: 10px; align-items: flex-start;
  transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out);
}
.toast[data-state='enter'] { opacity: 0; transform: translateY(100%); }
.toast[data-state='exit'] { opacity: 0; transform: translateY(8px) scale(0.98); transition-duration: 180ms; }
.toast svg { flex: none; margin-top: 1px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal-armed { transform: none; filter: none; }
  .reveal-in { transition: opacity 300ms ease; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* ?static — for recordings and PDFs: no motion at all, everything visible. */
html.static *, html.static *::before, html.static *::after {
  animation: none !important; transition: none !important;
}
html.static .reveal-armed { opacity: 1; transform: none; filter: none; }