/* =============================================================================
   Saga product style — base styles
   Requires tokens.css first. Resets, root sizing, type rhythm, focus, scrollbars.
   Load Montserrat yourself (see guide/typography.md): either
     <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
   or @fontsource-variable/montserrat in a bundled app.
   ============================================================================= */

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

html {
	font-size: calc(var(--base-font-size) * var(--text-scale));
	-webkit-text-size-adjust: 100%;
	color-scheme: light;
}

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--text-base);
	font-weight: var(--weight-regular);
	line-height: var(--leading-normal);
	color: var(--color-text);
	background: var(--color-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Vertical rhythm (DS-022): headings and paragraphs share one 16px step */
h1, h2, h3, h4, p, ul, ol, pre, table, figure { margin: 0 0 var(--space-md); }
h1 { font-size: var(--text-2xl); font-weight: var(--weight-semibold); line-height: var(--leading-tight); }
h2 { font-size: var(--text-xl);  font-weight: var(--weight-regular);  line-height: var(--leading-tight); }
h3 { font-size: var(--text-base); font-weight: var(--weight-semibold); line-height: var(--leading-normal); }
h4 { font-size: var(--text-sm);  font-weight: var(--weight-semibold); line-height: var(--leading-normal); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-secondary); }
:is(h1, h2, h3, h4, p, ul, ol, pre, table, figure):last-child { margin-bottom: 0; }
small { font-size: var(--text-sm); }
code, kbd, pre { font-family: var(--font-mono); font-size: 0.9em; }

a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 0.15em; }
a:hover { color: var(--color-primary-hover); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img, svg, video { max-width: 100%; height: auto; display: block; }
img, svg { vertical-align: middle; }
[hidden] { display: none !important; }

/* Focus (DS-006): one ring everywhere, never overridden per component */
:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}
:focus:not(:focus-visible) { outline: none; }

::placeholder { color: var(--input-color-placeholder); font-style: italic; }
::selection { background: var(--selection-bg); color: var(--selection-color); }

/* Scrollbars (DS-018): rounded thumb, no arrow end-caps, opt-in thin style */
*::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.saga-scrollbar { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb-bg) transparent; }
.saga-scrollbar::-webkit-scrollbar { width: var(--scrollbar-width); height: var(--scrollbar-width); }
.saga-scrollbar::-webkit-scrollbar-track { box-shadow: var(--scrollbar-track-shadow); border-radius: var(--radius-md); }
.saga-scrollbar::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb-bg); border-radius: var(--radius-md); outline: var(--scrollbar-thumb-outline); }

/* Utilities */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.mono { font-family: var(--font-mono); }

/* Prototype-only chrome (DS-023, Nathan's convention): anything violet is a
   note to the reader, never proposed UI. */
:root { --proto: #6c4fc7; --proto-wash: #f3effb; --proto-ink: #4a3d7a; --proto-line: #e6def7; }
.ptag, .standin { color: var(--proto-ink); background: var(--proto-wash); border: 1px dashed var(--proto); border-radius: var(--radius-sm); padding: 0 var(--space-xs); font-size: var(--text-xs); }

/* Reduced motion is handled by the tokens (movement durations → 0, fade floor
   survives). No blanket animation kill here: a component that reads
   --motion-fade must still be able to fade. */