/* ==========================================================================
   Base — element defaults, typography, links and focus styles
   ========================================================================== */

html {
    scroll-behavior: smooth;
    /* Keeps anchored and focused elements clear of the sticky header */
    scroll-padding-top: calc(var(--header-height) + 1.5rem);
}

body {
    font-family: var(--font-body);
    font-size: var(--text-md);
    line-height: var(--leading-normal);
    color: var(--color-text);
    background-color: var(--color-background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   Headings
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-heading);
    text-wrap: balance;
}

h1 {
    font-size: var(--text-4xl);
    font-weight: var(--weight-heavy);
}

h2 {
    font-size: var(--text-3xl);
}

h3 {
    font-size: var(--text-xl);
    line-height: var(--leading-snug);
}

h4 {
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
}

p {
    text-wrap: pretty;
}

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

small {
    font-size: var(--text-sm);
}

/* --------------------------------------------------------------------------
   Links
   -------------------------------------------------------------------------- */
a {
    color: var(--color-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: color var(--duration-fast) ease;
}

a:hover {
    color: var(--color-heading);
}

/* --------------------------------------------------------------------------
   Keyboard focus — visible on every interactive element
   -------------------------------------------------------------------------- */
:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
}

/* The skip link target receives programmatic focus only */
main:focus {
    outline: none;
}

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

hr {
    border: 0;
    border-top: 1px solid var(--color-border);
}

address {
    font-style: normal;
}

/* --------------------------------------------------------------------------
   Skip link
   -------------------------------------------------------------------------- */
.skip-link {
    position: absolute;
    top: var(--space-md);
    left: var(--space-md);
    z-index: var(--z-skip-link);
    padding: var(--space-sm) var(--space-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-primary);
    text-decoration: none;
    background-color: var(--color-accent);
    border-radius: var(--radius-sm);
    transform: translateY(-200%);
}

.skip-link:focus {
    color: var(--color-primary);
    transform: none;
}

/* --------------------------------------------------------------------------
   Dark theme context
   Add the class "theme-dark" to any section to switch its colours.
   Components inside automatically adapt because they use these tokens.
   -------------------------------------------------------------------------- */
.theme-dark {
    --color-text: var(--color-on-dark);
    --color-heading: #ffffff;
    --color-muted: var(--color-on-dark-muted);
    --color-border: var(--color-border-dark);
    --color-surface: var(--color-primary-light);
    --color-link: var(--color-accent);
    --color-accent-text: var(--color-accent);
    --color-focus: var(--color-accent);

    color: var(--color-text);
    background-color: var(--color-primary);
}