/* dragonfinn.net — base sheet.
 *
 * Two sources of tokens, deliberately separate:
 *
 *   css/palette.css   GENERATED colours, glass tints and shadows.
 *                     Produced by web/tools/palette.py from two anchor hues —
 *                     never hand-edit it, edit the script's CONFIG and re-run.
 *   this file         hand-set type scale, spacing and radii, followed by the
 *                     reset and the document defaults that consume both.
 *
 * Ordering: tokens -> reset -> document defaults.  Keep it that way.
 */

/* --- type, space, radii ------------------------------------------------- */
:root {
    /* Display is a geometric sans, body is a legibility-first UI face.  The
     * geometric candidates are only used if the platform has them, so the page
     * degrades to a neutral sans rather than to a fallback nobody chose —
     * vendoring a webfont is the fix if the display face must be guaranteed. */
    --font-display: "Futura", "Futura Bk BT", "Century Gothic", "Avenir Next",
                    "Segoe UI Variable Display", system-ui, sans-serif;
    --font-sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
                 Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas,
                 "Liberation Mono", monospace;

    --step--1: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
    --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
    --step-1:  clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --step-2:  clamp(1.6rem, 1.35rem + 1.2vw, 2.25rem);
    --step-3:  clamp(2.1rem, 1.6rem + 2.4vw, 3.25rem);
    --step-4:  clamp(2.6rem, 1.8rem + 4vw, 4.5rem);

    --space-2xs: 0.25rem;
    --space-xs:  0.5rem;
    --space-sm:  0.75rem;
    --space-md:  1.25rem;
    --space-lg:  2rem;
    --space-xl:  3.25rem;
    --space-2xl: 5rem;

    /* Radii are generous on purpose: the glass shapes are the composition, and
     * a 6px corner fights them. */
    --radius-sm:   10px;
    --radius-md:   16px;
    --radius-lg:   26px;
    --radius-pill: 999px;
    --radius:      var(--radius-md);

    --measure: 68ch;
    --width:   72rem;
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body,
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd {
    margin: 0;
}

ul[class],
ol[class] {
    padding: 0;
    list-style: none;
}

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

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

/* --- document ----------------------------------------------------------- */
body {
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--step-0);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Geometric display face, tight tracking — the "modern" half of the look comes
 * from the type being set close, not from decoration. */
h1, h2, h3 {
    font-family: var(--font-display);
    line-height: 1.08;
    letter-spacing: -0.015em;
    text-wrap: balance;
    font-weight: 600;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); line-height: 1.2; }

p, li {
    text-wrap: pretty;
}

a {
    color: var(--accent-strong);
    text-underline-offset: 0.15em;
}

code, kbd, samp {
    font-family: var(--font-mono);
    font-size: 0.9em;
}

/* Visible, non-default focus for anything focusable. */
:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

main {
    width: min(100% - 2 * var(--space-md), var(--width));
    margin-inline: auto;
    padding-block: var(--space-lg);
}

/* --- motion ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}