@import url('./atlas-tokens.css');

:root {
  --paper: var(--atlas-paper); --surface: var(--atlas-surface); --surface-2: var(--atlas-wash);
  --ink: var(--atlas-ink); --ink-2: #43524d; --ink-3: var(--atlas-muted); --rule: var(--atlas-line); --rule-2: #b9c9c4;
  --blue: var(--atlas-lake); --green: var(--atlas-moss); --ochre: var(--atlas-ochre); --teal: var(--atlas-lake); --accent: var(--atlas-lake); --tint: var(--atlas-lake);
  --serif: var(--atlas-serif); --sans: var(--atlas-sans); --mono: var(--atlas-mono);
  color: var(--atlas-ink); background: var(--atlas-paper); font-family: var(--atlas-serif);
}
html { background: var(--atlas-paper) !important; color: var(--atlas-ink) !important; }
body { background: var(--atlas-paper) !important; color: var(--atlas-ink) !important; font-family: var(--atlas-serif) !important; }
h1, h2, h3, h4 { color: var(--atlas-ink) !important; font-family: var(--atlas-serif) !important; }
.eyebrow, .label, .panel-label, .section-label, .kicker, .marg, .meta, button, select, input, label { font-family: var(--atlas-sans) !important; }
code, pre, output, .mono, .metric-value, .value, .readout { font-family: var(--atlas-mono) !important; }
a { color: var(--atlas-lake); }
button, select, input, textarea { border-color: var(--atlas-line) !important; border-radius: var(--atlas-radius) !important; background: var(--atlas-surface) !important; color: var(--atlas-ink) !important; }
button:hover, button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: var(--atlas-focus) !important; outline-offset: 3px; }
button.primary, .primary, .btn.primary, .button.primary { background: var(--atlas-ink) !important; color: var(--atlas-paper) !important; border-color: var(--atlas-ink) !important; }
.panel, .card, .paper, .figure, .figure-wrap, .rail, .sect, .section, .try-i, table, .wrap > footer { background: var(--atlas-surface) !important; border-color: var(--atlas-line) !important; color: var(--atlas-ink) !important; }
canvas { background: var(--atlas-surface) !important; border-color: var(--atlas-line) !important; }
@media (max-width: 760px) { body { min-width: 320px; } button, select, input { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }