/**
 * Real Productions — Theme
 * Base element styling, font loading, and reduced-motion handling.
 * Loads after tokens.css. See .design/DESIGN.md Section 3 for typography rationale.
 */

/* Self-hosted 'Geom Sans' WOFF2 files are not yet sourced (Phase Five task —
   see .design/DESIGN.md). Until then the stack below falls straight to the
   platform system-ui sans, which already matches the geometric-sans brief. */

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

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-family);
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-base);
    transition: background-color var(--transition-base), color var(--transition-base);
}

h1, h2, h3, h4 {
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 var(--space-md) 0;
    letter-spacing: 0.01em;
}

h1 { font-size: clamp(2rem, 1.5rem + 2vw, var(--text-h1)); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, var(--text-h2)); }
h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, var(--text-h3)); }
h4 { font-size: clamp(1rem, 0.95rem + 0.2vw, var(--text-h4)); font-weight: 400; }

p {
    margin: 0 0 var(--space-sm) 0;
    color: var(--color-text);
}

p.lead {
    font-size: clamp(1rem, 0.95rem + 0.4vw, 1.25rem);
    color: var(--color-text-muted);
}

small, .caption {
    font-size: var(--text-caption);
    color: var(--color-text-muted);
}

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: opacity var(--transition-fast);
}

a:hover { opacity: 0.85; }

/* Universal focus handling — visible only for keyboard users where supported */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
}

/* Fallback for browsers without :focus-visible */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
}

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

ul, ol {
    margin: 0 0 var(--space-sm) 0;
    padding-left: 1.25em;
}

dl { margin: 0; }
dt { font-weight: 700; color: var(--color-text); margin-top: var(--space-sm); }
dd { margin: 0 0 var(--space-2xs) 0; color: var(--color-text-muted); }

/* Skip-to-content link — hidden until focused */
.skip-link {
    position: absolute;
    top: -100px;
    left: var(--space-sm);
    background: var(--color-accent);
    color: var(--color-base);
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--radius-md);
    z-index: 1000;
    font-weight: 700;
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: var(--space-sm);
}

/* Respect reduced-motion at the theme level — every animated component
   must also check this, but this catches anything that slips through. */
@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;
    }
}