/* Casewire base: page defaults, the type scale and the shared surfaces.
   Load after tokens.css. Every colour, size and radius is a design token. */

* { box-sizing: border-box; }

html, body {
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/24px var(--font-sans);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent-soft); color: var(--ink); }

code, pre, kbd, samp { font-family: var(--font-mono); font-size: 0.95em; }

/* Focus: one ring everywhere. */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ───── Type scale ───── */

.cw h1, .cw h2, .cw h3, .cw h4, .cw p { margin: 0; }
.cw h1, .t-h3 { font: 600 28px/34px var(--font-sans); letter-spacing: -0.02em; text-wrap: balance; }   /* title-1 */
.cw h2, .cw h3, .cw h4, .t-h4 { font: 600 20px/26px var(--font-sans); letter-spacing: -0.01em; }       /* title-2 */

.t-body-sm { margin: 0; font: 400 13px/20px var(--font-sans); color: var(--ink-muted); }
.t-caption { margin: 0; font: 400 12.5px/18px var(--font-sans); color: var(--ink-muted); }
.t-label, .t-label-sm { margin: 0; font: 500 13px/16px var(--font-sans); color: var(--ink); }

/* Capitals in Geist Mono: day headers and section labels. */
.t-eyebrow {
  margin: 0;
  font: 500 11.5px/16px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Dates, counts and URLs. */
.t-mono-sm  { margin: 0; font: 400 13px/18px var(--font-mono); }
.t-mono-2xs { margin: 0; font: 400 12px/16px var(--font-mono); }

/* The fixed AI-summary disclaimer. */
.cw p.disclaimer { font: 400 12.5px/18px var(--font-sans); color: var(--ink-muted); }

.cw a { color: var(--accent-ink); text-decoration: none; transition: color 120ms ease-out; }
.cw a:hover { text-decoration: underline; text-underline-offset: 2px; }
.cw hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-6) 0; }

/* ───── Surfaces: separated by hairlines, never by shadow ───── */

.surface-panel, .surface-elevated {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.status-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
}

/* The logo, as a background so it follows the scheme and theme. */
.brand-logo {
  display: block; flex: none;
  width: 110px; height: 20px;
  background: var(--logo-lockup) left center / contain no-repeat;
}
.brand-logo--stacked { width: 74px; height: 64px; background-image: var(--logo-stacked); }

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