/*
 * The one place a BizMail design token is defined.
 *
 * Copied into each app's public/ by `bun run ui:sync`. Do not edit the copies:
 * packages/ui/test/sync.test.js fails when one drifts from this file.
 */
:root {
  --paper: #e4ebe3;
  --panel: #f3f6f1;
  --ink: #162017;
  --mute: #5a6358;
  --rule: #b4beaf;

  /* Borders and focus rings need 3:1 contrast. Small accent text uses the
     text-safe variant, which clears 4.5:1 on paper. */
  --spine: #c45c26;
  --spine-text: #a34a15;

  --signal: #1f6b4a;
  --wait: #8a5a12;
  --alert: #8c2f2b;

  --display: "Literata", "Source Serif 4", serif;
  --mono: "Spline Sans Mono", ui-monospace, monospace;
  --measure: 34rem;

  /* CSS custom properties cannot be used in media-query conditions. These
     document the scale; every query below uses the matching rem literal. */
  --break-narrow: 30rem;
  --break-wide: 46rem;
}

.state {
  padding: 1rem 0;
  color: var(--mute);
}

.state p {
  margin: 0 0 0.5rem;
}

.state-error,
.state-denied {
  color: var(--alert);
}

.state-success {
  color: var(--signal);
}

.state-loading {
  color: var(--mute);
}

/* An empty folder and a failed load must never look the same. The empty state
   is quiet; the failed one is not. */
.state-empty {
  color: var(--mute);
  font-style: italic;
}

[data-scroll-region] {
  overflow-x: auto;
}

[data-scroll-region]:focus-visible {
  outline: 2px solid var(--spine);
  outline-offset: 2px;
}