/* ==========================================================================
   Bullet base styles
   Reset, base typography, layout primitives. Consumes tokens.css only.

   PROVISIONAL (not specified in Figma — revisit when tokens land):
   - focus ring uses --color-text; replace if Figma defines a focus style
   - heading line-height 1.2; Figma defines size (24) but no leading
   - Inter is loaded by the page shell (see preview/index.html); flag
     self-host vs CDN with backend dev (docs/BACKEND-QUESTIONS.md #2)
   ========================================================================== */

/* --- Reset ---------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

/* The [hidden] attribute must always win — JS toggles it to collapse sections,
   disclosure rows, drawers and menus, and component display rules (flex/grid)
   would otherwise override the UA [hidden]{display:none}. */
[hidden] {
  display: none !important;
}

img,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* --- Base typography -------------------------------------------------------- */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  color: var(--color-text);
  background: var(--color-surface); /* pages are white — pink lives on the sidebar/menus only (Peter, 11 Jun 2026) */
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-size: var(--text-heading);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  overflow-wrap: break-word;
}

p {
  overflow-wrap: break-word;
}

a {
  color: inherit;
}

small,
.text-muted {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Money, account numbers, anything columnar — accounting product, digits
   must align. Applied to all tabular data by default. */
.amount,
td,
th {
  font-variant-numeric: tabular-nums;
}

/* --- Accessibility floor ------------------------------------------------------ */
:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

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

/* --- Layout primitives -------------------------------------------------------- */
/* Vertical stack: children spaced with the token scale via gap (no margin
   collapse). Default gap = 12px; override with a utility or component CSS. */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Page column — Figma screens are 1440 wide with ~800px content tables */
.page {
  max-width: 1440px;
  margin-inline: auto;
  padding: var(--space-4);
}

/* Header action cluster (video / settings cog / Actions): consistent spacing
   between the trailing controls — global so every screen's header matches. */
.header-sub { gap: var(--space-3); }

/* Mobile: header toolbars wrap instead of overflowing */
@media (max-width: 768px) {
  .header-sub, .toolbar-row { flex-wrap: wrap; row-gap: var(--space-2); }
}

/* The easter-egg peach 🍑 always wiggles — global setting (Peter, 3 Jul). Any .peach loops. */
.peach { display: inline-block; transform-origin: 50% 85%; animation: peachWiggleLoop 1.15s ease-in-out infinite; }
@keyframes peachWiggleLoop { 0%, 100% { transform: rotate(0deg); } 20% { transform: rotate(-11deg); } 40% { transform: rotate(9deg); } 60% { transform: rotate(-7deg); } 80% { transform: rotate(5deg); } }
@media (prefers-reduced-motion: reduce) { .peach { animation: none; } }