/* base.css — self-hosted fonts, typography defaults, links, focus, body rhythm */

@font-face {
    font-family: "Sora";
    src: url("../../fonts/sora-latin-var.woff2") format("woff2");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url("../../fonts/ibm-plex-sans-latin-var.woff2") format("woff2");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html {
    color-scheme: dark;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-block-start: calc(var(--header-height-compact) + var(--space-lg));
}

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--fs-md);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-display);
    color: var(--color-text);
    text-wrap: balance;
}

h1 { font-size: clamp(var(--fs-2xl), 5vw, var(--fs-4xl)); }
h2 { font-size: clamp(var(--fs-xl), 4vw, var(--fs-3xl)); }
h3 { font-size: clamp(var(--fs-lg), 3vw, var(--fs-2xl)); }

p { text-wrap: pretty; }

strong { font-weight: var(--fw-semibold); }

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

/* Focus — visible, distinct, never colour-only (engineering §11) */
:focus-visible {
    outline: var(--rule) solid var(--color-primary);
    outline-offset: var(--focus-offset);
    border-radius: var(--radius-sm);
}

[tabindex="-1"]:focus { outline: none; }

/* Skip link — first focusable element (engineering §4) */
.skip-link {
    position: absolute;
    inset-block-start: var(--space-sm);
    inset-inline-start: var(--space-sm);
    display: inline-flex;
    align-items: center;
    min-block-size: var(--touch-target);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-radius: var(--radius-button);
    font-size: var(--fs-sm);
    font-weight: 600;
    z-index: var(--z-skip);
    transform: translateY(-200%);
    transition: transform var(--transition-base);
}
.skip-link:focus { transform: translateY(0); }

/* Icons — inline SVG sprite symbols (1.5px stroke set on the symbols) */
.icon {
    display: inline-block;
    inline-size: var(--icon-md);
    block-size: var(--icon-md);
    flex-shrink: 0;
}

/* Inline text links inside running copy — underline is the non-colour cue */
.text-link {
    color: var(--color-accent);
    text-decoration: underline;
    text-decoration-thickness: var(--hairline);
    text-underline-offset: 0.2em;
    transition: color var(--transition-fast);
}
.text-link:hover { color: var(--color-accent-highlight); }