/* ─── Design tokens ──────────────────────────────────────────────────────── */
:root {
    /* Colours */
    --color-dark: oklch(93% 0 0);           /* primary text */
    --color-mid: oklch(70% 0 0);            /* secondary text */
    --color-muted: oklch(52% 0 0);          /* muted / placeholder text */
    --color-bg: oklch(96% 0 0);             /* light bg reference */
    --color-surface: oklch(30% 0 0);        /* card surfaces */
    --color-accent: oklch(80% 0.16 75);     /* amber accent */
    --color-accent-dim: oklch(68% 0.14 75); /* amber accent – hover / muted */
    --color-chrome: oklch(22% 0 0);         /* navbar / footer / body background */
    --color-chrome-border: oklch(34% 0.04 75); /* amber-tinted chrome border */

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;

    /* Layout */
    --max-content-width: 1000px;
    --navbar-height: 3.5rem;
    --footer-height: 3rem;

    /* Typography */
    --font-family: 'Arial', sans-serif;
    --font-size-base: 1rem;
    --line-height-base: 1.6;
    --font-size-sm: 0.875rem;
    --font-size-lg: 1.125rem;

    /* Borders */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;

    /* Shadows */
    --shadow-sm: 0 1px 4px oklch(0% 0 0 / 0.5);
    --shadow-md: 0 2px 8px oklch(0% 0 0 / 0.6);
    --shadow-lg: 0 4px 16px oklch(0% 0 0 / 0.7);
}

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

/* ─── Base ───────────────────────────────────────────────────────────────── */
body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    background-color: var(--color-chrome);
    color: var(--color-dark);
    margin: 0;
    padding: 0;
}

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

a {
    color: var(--color-accent);
}