/* base.css - Emir (M1)
   Group file: check with everyone before changing.

   Element defaults and the type hierarchy. Every value comes from
   tokens.css, which loads before this file. Nothing hardcoded here.
   Load order: tokens → base → layout → components → page sheet. */

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    /* theme flip animates the whole site because
      everything reads the variables */
    transition: background .25s ease, color .25s ease;
}

::selection { background: var(--accent); color: var(--btn-text); }

/* links take --accent-text, the AA-safe amber. Raw --accent fails
   contrast at this size in the light theme, see tokens.css. */
a { color: var(--accent-text); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

img { max-width: 100%; height: auto; }

/* skip link: first focusable thing on every page (WCAG).
   Hidden until someone tabs into it. */
.skip-link {
    position: absolute;
    left: var(--space-3);
    top: -48px;
    z-index: 100;
    padding: var(--space-2) var(--space-3);
    background: var(--surface);
    color: var(--accent-text);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    transition: top var(--transition);
}
.skip-link:focus { top: var(--space-2); text-decoration: none; }

/* for text screen readers need but sighted users don't */
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Type hierarchy: four levels, same on every page (master plan §5.2).
   Georgia for headings, it's the film-brand voice of the site. */
h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.25;
    margin: 0 0 var(--space-3);
}
h1 { font-size: 2.2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }

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

/* mono is for metadata: prices, ISO numbers, turnarounds,
   anything the lab would stamp on a canister */
code, .mono { font-family: var(--font-mono); }

/* Reduced motion: kill every animation and transition site-wide.
   The scoped guards in components.css / m4-pages.css stay as
   documentation. Content is never hidden by base styles, so with
   motion off everything just renders natural. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
}