/*
 * Page-level foundations: reset, type scale, layout helpers, motion.
 * Load after tokens.css and before components.css. Colours come from the
 * semantic --color-* tokens only, so a light theme is one attribute away.
 */

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

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Clear the sticky header when jumping to an anchor. */
    scroll-padding-top: 6rem;
}

/* Size steps. Every size in the site CSS (type, spacing, radii, control
   heights, widths) is in rem, so the root font size scales the whole UI the
   way browser zoom would. Phones keep the app's 16px scale; the marketing
   pages read larger on bigger screens. */
@media (min-width: 600px) {
    html {
        font-size: 112.5%; /* 18px */
    }
}

@media (min-width: 1024px) {
    html {
        font-size: 125%; /* 20px */
    }
}

body {
    min-height: 100vh;
    font: var(--text-body);
    background-color: var(--color-bg);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

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

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

button {
    background: none;
    border: none;
    cursor: pointer;
}

a {
    color: var(--color-primary-text);
    text-decoration: none;
    transition: color var(--duration-fast) var(--easing);
}

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

::selection {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ---------- Type ---------- */

h1,
.t-display {
    font: var(--text-display);
    letter-spacing: var(--tracking-display);
}

h2,
.t-title1 {
    font: var(--text-title1);
    letter-spacing: var(--tracking-title1);
}

h3,
.t-title2 {
    font: var(--text-title2);
    letter-spacing: var(--tracking-title2);
}

h4,
.t-headline {
    font: var(--text-headline);
}

.t-hero {
    font: var(--text-hero);
    letter-spacing: var(--tracking-hero);
    text-wrap: balance;
}

.t-body {
    font: var(--text-body);
}

.t-callout {
    font: var(--text-callout);
}

.t-subhead {
    font: var(--text-subhead);
}

.t-caption {
    font: var(--text-caption);
}

.t-overline {
    font: var(--text-overline);
    letter-spacing: var(--tracking-overline);
    text-transform: uppercase;
}

.text-muted {
    color: var(--color-text-muted);
}

.text-subtle {
    color: var(--color-text-subtle);
}

.text-accent {
    color: var(--color-accent-text);
}

.text-primary {
    color: var(--color-primary-text);
}

.text-center {
    text-align: center;
}

h1,
h2,
h3 {
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

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

/* ---------- Layout ---------- */

/* 16px gutter on phones, 24px from medium, 32px from expanded. */
.container {
    width: 100%;
    max-width: var(--page-max);
    margin-inline: auto;
    padding-inline: var(--space-lg);
}

.container-narrow {
    max-width: calc(var(--content-prose) + 2 * var(--space-lg));
}

@media (min-width: 600px) {
    .container {
        padding-inline: var(--space-xl);
    }

    .container-narrow {
        max-width: calc(var(--content-prose) + 2 * var(--space-xl));
    }
}

@media (min-width: 840px) {
    .container {
        padding-inline: var(--space-2xl);
    }

    .container-narrow {
        max-width: calc(var(--content-prose) + 2 * var(--space-2xl));
    }
}

main {
    display: block;
}

.section {
    padding-block: var(--space-3xl);
}

@media (min-width: 840px) {
    .section {
        padding-block: var(--space-4xl);
    }
}

.stack-xs > * + * { margin-top: var(--space-xs); }
.stack-sm > * + * { margin-top: var(--space-sm); }
.stack-md > * + * { margin-top: var(--space-md); }
.stack-lg > * + * { margin-top: var(--space-lg); }
.stack-xl > * + * { margin-top: var(--space-xl); }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

[hidden] {
    display: none !important;
}

/* ---------- Motion ---------- */

/* Scroll reveal. site.js adds .is-visible; without JS (no .js on <html>)
   everything is simply shown. */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(1rem);
    transition:
        opacity var(--duration-slow) var(--easing) var(--reveal-delay, 0ms),
        transform var(--duration-slow) var(--easing) var(--reveal-delay, 0ms);
}

.js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

@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;
        transition-delay: 0ms !important;
    }

    .js [data-reveal] {
        opacity: 1;
        transform: none;
    }
}