/* ═══════════════════════════════════════════════════════════
   Capplon Design System — Base
   Global reset AND visual-identity defaults: typography, link colour,
   focus ring, page background, scrollbar styling.

   THIS FILE'S REQUIRED-NESS DEPENDS ON WHAT YOU WANT, NOT ON WHAT ELSE
   YOU HAPPEN TO LOAD. Read this before you skip it or before you
   re-vendor tokens.css.

   ── If you are updating an EXISTING vendored tokens.css pinned before
   commit a3bf454 (capplon/design-system) — check MIGRATIONS.md first.
   Your reset currently lives at the bottom of your old tokens.css, not
   here. Updating tokens.css alone, without adding this file in the SAME
   change, loses it — and DO NOT assume that failure is obvious. This file
   bundles two different things: a generic technical reset (box-sizing)
   that something else you already load (a Bootstrap reboot, etc.) may
   already supply, AND Capplon's specific visual identity (Figtree, the
   warm-neutral page background, --tn-accent links, this system's focus
   ring, font-smoothing) that nothing else you load provides an
   equivalent for. If you have another reset loaded, losing this file
   will NOT look broken — box-sizing still holds, nothing collapses. It
   will look like your product's font and background quietly reverted to
   that other reset's defaults, page by page, in a way normal code review
   does not catch. A silent partial regression is the DANGEROUS outcome
   here, not a reassuring one. Treat this file as REQUIRED alongside that
   update unless you are deliberately dropping the shared visual identity
   (and say so explicitly in your own VENDORED.md if you do).

   ── If you are vendoring the design system for the FIRST TIME, ask what
   you actually want, not what you already have loaded: do you want this
   product's document-level look (font, background, links, focus ring) to
   BE the Capplon identity? If yes, take this file — nothing else you load
   provides those specific values, whatever generic reset it supplies. If
   no — the product deliberately keeps its own visual identity and is only
   borrowing specific tn- components — skip it; the rest of the design
   system (tokens.css + components/*.css) works standalone without it,
   since components style themselves and never depend on this reset being
   present.

   Requires tokens.css loaded first (every rule below references its
   variables).
   ═══════════════════════════════════════════════════════════ */

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

/* `html` deliberately does NOT set font-size. Every --tn-font-size-* token
   is authored in rem against a 16px root (see tokens.css's own px comments
   — 0.8125rem is documented as "13px", which is only true at 16px). `rem`
   always resolves against the ROOT element's font-size specifically, not
   an ancestor's — so putting a token-based size on `html` doesn't just set
   body copy, it silently REDEFINES what 1rem means for the entire document,
   including every rem value in every component file. See MIGRATIONS.md. */
html {
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

body {
    font-family: var(--tn-font-family);
    font-size: var(--tn-font-size-sm);
    color: var(--tn-text-primary);
    background-color: var(--tn-bg-page);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--tn-accent);
    text-decoration: none;
}

a:hover {
    color: var(--tn-accent-hover);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: var(--tn-text-primary);
    margin: 0;
    letter-spacing: -0.01em;
}

/* Shared focus ring for interactive elements */
button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--tn-accent);
}

/* Thin, unobtrusive scrollbars */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--tn-scrollbar-thumb);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--tn-scrollbar-thumb-hover);
}