/* Regulile de bază, pentru toate paginile. Mărimile titlurilor le dă fiecare pagină, în app.css. */
*, *::before, *::after { box-sizing: border-box; }
/* „clip”, nu „hidden”, ca elementele lipicioase (sticky) să meargă în continuare. */
html, body { overflow-x: clip; }
html { scrollbar-color: var(--color-muted) var(--color-paper); }
body {
    margin: 0;
    background: var(--color-paper);
    color: var(--color-ink-2);
    font-family: var(--font-body);
    font-size: var(--text-md);
    line-height: 1.55;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    caret-color: var(--color-accent);
}
::selection { background: var(--color-accent-soft); color: var(--color-accent-soft-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

a { color: var(--color-ink); font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 0.16em; transition: text-decoration-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
a:hover { text-decoration-color: var(--color-accent); color: var(--color-accent); }

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: var(--display-weight);
    color: var(--color-ink);
    letter-spacing: var(--tracking-head);
    line-height: 1.1;
    overflow-wrap: break-word;
    min-width: 0;
    text-wrap: balance;
}
p { text-wrap: pretty; }
img, video { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
.num { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}