/* Global base — pairs with tokens.css. Imported by index.html after it. */
* { box-sizing: border-box; }

/* the [hidden] attribute must win even over layout display rules below */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* keep the app locked to the viewport; scrolling lives inside panes */
  overscroll-behavior: none;
}

h1, h2, h3, .display {
  font-family: var(--font-heading);
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0;
}

.tnum, .figure { font-variant-numeric: tabular-nums; }

button { font-family: inherit; }

/* Keyboard focus — identical everywhere, never browser default */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
::selection { background: var(--accent-tint); }

/* Italic is reserved for quoted source documents only */
blockquote {
  font-style: italic;
  color: var(--text-2);
  border-left: 2px solid var(--proposal);
  padding-left: 14px;
  margin: 0;
}

/* Motion keyframes */
@keyframes shimmer { 0%,100% { opacity: .45 } 50% { opacity: .9 } }
@keyframes caret { 0%,45% { opacity: 1 } 50%,100% { opacity: 0 } }
@keyframes breathe { 0%,100% { opacity: .45 } 50% { opacity: 1 } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
@keyframes springIn { from { opacity: 0; transform: translateY(16px) scale(.985) } to { opacity: 1; transform: none } }
@keyframes thinking { 0%,80%,100% { transform: scale(.6); opacity: .4 } 40% { transform: scale(1); opacity: 1 } }
@keyframes ring { 0% { transform: scale(1); opacity: .5 } 100% { transform: scale(2.4); opacity: 0 } }

.skeleton {
  background: var(--hairline);
  border-radius: 6px;
  animation: shimmer 1.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: var(--dur-base) !important;
  }
  .skeleton { animation: none; opacity: .6; }
}