/**
 * Modern CSS Reset + Design Tokens
 */

:root {
    /* Primary palette — OKLCH scale from #4b573d */
    --color-primary-50:  oklch(0.97 0.008 140);
    --color-primary-100: oklch(0.93 0.018 140);
    --color-primary-200: oklch(0.86 0.038 140);
    --color-primary-300: oklch(0.74 0.058 140);
    --color-primary-400: oklch(0.58 0.068 140);
    --color-primary-500: oklch(0.42 0.055 140); /* ≈ #4b573d */
    --color-primary-600: oklch(0.36 0.050 140);
    --color-primary-700: oklch(0.30 0.042 140);
    --color-primary-800: oklch(0.24 0.034 140);
    --color-primary-900: oklch(0.17 0.024 140);

    /* Semantic colors */
    --color-primary: var(--color-primary-500);
    --color-text: #2d2d2d;
    --color-text-light: #6b6b6b;
    --color-bg: #ffffff;
    --color-bg-alt: var(--color-primary-50);
    --color-border: var(--color-primary-200);
    --color-accent: var(--color-primary-600);

    /* Typography */
    --font-base: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-heading: var(--font-base);
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

    /* Fluid type scale */
    --size-step--3: 0.8125rem;
    --size-step--2: 0.875rem;
    --size-step--1: 0.9375rem;
    --size-step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --size-step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --size-step-2: clamp(1.5rem, 1.35rem + 0.75vw, 2rem);
    --size-step-3: clamp(2rem, 1.75rem + 1.25vw, 2.75rem);
    --size-step-4: clamp(2.5rem, 2.1rem + 2vw, 3.75rem);

    /* Display heading sizes (fluid, for component sections) */
    --size-display:    clamp(1.75rem, 1.4rem + 1.75vw, 3rem);
    --size-display-lg: clamp(2rem, 1.6rem + 2vw, 3.25rem);
    --size-display-xl: clamp(2.25rem, 1.8rem + 2.5vw, 3.75rem);

    /* Line-height scale */
    --leading-display: 1.15;
    --leading-tight:   1.2;
    --leading-snug:    1.3;
    --leading-normal:  1.6;
    --leading-relaxed: 1.7;

    /* Fluid spacing */
    --space-xs: clamp(0.5rem, 0.45rem + 0.25vw, 0.625rem);
    --space-s: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --space-m: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
    --space-l: clamp(1.5rem, 1.35rem + 0.75vw, 2rem);
    --space-xl: clamp(2rem, 1.75rem + 1.25vw, 2.75rem);
    --space-2xl: clamp(3rem, 2.5rem + 2.5vw, 4.5rem);

    /* Layout */
    --max-width: 75rem;
    --gutter: var(--space-m);

    /* Motion */
    --transition-base: 200ms ease;
}

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

* {
    margin: 0;
    padding: 0;
}

html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
}

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

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

h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
    line-height: var(--leading-tight);
}

p {
    overflow-wrap: break-word;
}

a {
    color: inherit;
    text-decoration-skip-ink: auto;
}

ul[role="list"],
ol[role="list"] {
    list-style: none;
}

:focus-visible {
    outline: 2px solid var(--color-primary-400);
    outline-offset: 2px;
}

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

/* Skip link — visible only on focus */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--gutter);
    z-index: 999;
    padding: 0.5em 1em;
    background-color: var(--color-primary-700);
    color: var(--color-bg);
    font-size: var(--size-step--2);
    text-decoration: none;
    border-radius: 0 0 4px 4px;
}

.skip-link:focus {
    top: 0;
}