/* ============================================================
   site.css — global reset, base typography, and shared defaults.
   Component styles live in components.css; layout chrome lives
   in MasterPages/main-master.js.css.
   ============================================================ */

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

[hidden] { display: none !important; }
.hidden  { display: none; }

html, body {
    margin: 0;
    padding: 0;
}

html {
    background: var(--surface-app);
    color: var(--text-primary);
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--surface-app);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, svg, video, canvas {
    max-width: 100%;
    display: block;
}

/* ============================================================
   Headings — modest base styles; pages override as needed.
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--space-12);
    color: var(--text-primary);
    line-height: 1.2;
}

h1 { font-size: var(--font-size-3xl); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: var(--font-size-2xl); font-weight: 600; letter-spacing: -0.01em; }
h3 { font-size: var(--font-size-xl);  font-weight: 600; }
h4 { font-size: var(--font-size-lg);  font-weight: 600; }
h5 { font-size: var(--font-size-base); font-weight: 600; }
h6 { font-size: var(--font-size-sm);  font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); }

p { margin: 0 0 var(--space-12); }

/* ============================================================
   Links — zone-aware, dark-mode aware via tokens.
   Pages can override per-context.
   ============================================================ */

a {
    color: var(--text-link);
    text-decoration: none;
    transition: color var(--motion-fast) var(--ease-standard);
}

a:hover { color: var(--text-link-hover); }

a:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-xs);
}

/* ============================================================
   Form element resets — interactive elements should inherit
   the document's font and color by default.
   ============================================================ */

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

button { cursor: pointer; }

button:focus-visible,
[role="button"]:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* ============================================================
   Code & monospace
   ============================================================ */

code, kbd, samp, pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
}

/* ============================================================
   Selection
   ============================================================ */

::selection {
    background: color-mix(in srgb, var(--zone-600, var(--admin-600)) 25%, transparent);
    color: var(--text-primary);
}

/* ============================================================
   Scrollbars (Chromium) — calmer, theme-aware.
   ============================================================ */

::-webkit-scrollbar         { width: 12px; height: 12px; }
::-webkit-scrollbar-track   { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border: 3px solid var(--surface-app);
    border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }