/*
 * Design tokens for collect.golf: the yardage book world (10 Sep 2026).
 * Every colour and font used by app.css must reference one of these
 * custom properties -- no hex/rgb/oklch literals live anywhere else.
 */

/* Self-hosted faces: one variable file per family. */
@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url("../fonts/archivo.woff2") format("woff2");
}
@font-face {
    font-family: "Archivo Narrow";
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url("../fonts/archivo-narrow.woff2") format("woff2");
}
@font-face {
    font-family: "Caveat";
    font-style: normal;
    font-weight: 500 600;
    font-display: swap;
    src: url("../fonts/caveat.woff2") format("woff2");
}

:root {
    /* Page stock: bright white book paper, then the pale plan-green tints
       a yardage book prints its hole plans in. */
    --color-paper: oklch(98% 0.004 120);
    --color-paper-2: oklch(94.5% 0.028 145);
    --color-paper-3: oklch(89% 0.045 145);

    /* Ink: printed graphite, and the lighter grey of secondary figures. */
    --color-ink: oklch(27% 0.008 260);
    --color-ink-2: oklch(46% 0.012 260);
    --color-rule: oklch(78% 0.012 260);

    /* Cover colour: the laminated yellow of a tour yardage book. Nav and
       the primary action only; text on it is ink. */
    --color-accent: oklch(87% 0.165 92);
    --color-accent-ink: var(--color-ink);

    /* Pin red: the flag on the plan. Focus rings and the caret. */
    --color-pin: oklch(56% 0.2 28);

    /* Links + focus */
    --color-link: oklch(40% 0.11 150);
    --color-focus: var(--color-pin);

    /* Status / tier tokens (text colour; badges are printed outlines) */
    --color-tour: oklch(48% 0.16 28);
    --color-tour-soft: oklch(95% 0.03 28);
    --color-gallery: oklch(42% 0.12 290);
    --color-gallery-soft: oklch(94% 0.035 290);
    --color-warn: oklch(52% 0.12 70);
    --color-warn-soft: oklch(95% 0.045 85);

    /* Fonts: one family in two widths, plus the pencil. */
    --font-body: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-display: "Archivo Narrow", "Archivo", ui-sans-serif, system-ui, sans-serif;
    --font-figures: "Archivo Narrow", "Archivo", ui-sans-serif, system-ui, sans-serif;
    --font-pencil: "Caveat", "Bradley Hand", "Segoe Print", cursive;
    --font-code: ui-monospace, "SFMono-Regular", Menlo, monospace;

    /* Type scale */
    --text-h1: clamp(2.4rem, 1.7rem + 2.6vw, 3.75rem);
    --text-h2: 1.25rem;
    --text-lg: 1.125rem;
    --text-base: 1rem;
    --text-sm: 0.875rem;
    --text-xs: 0.8rem;

    /* Spacing -- 4pt base */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;

    /* Shape: printed rectangles, near-square corners. */
    --radius-sm: 2px;
    --radius: 3px;
    --radius-pill: 999px;
    --rule: 1px;

    /* Motion */
    --ease-out: cubic-bezier(0.2, 0, 0, 1);
    --dur-short: 140ms;

    /* Z-scale */
    --z-base: 1;
    --z-raised: 10;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal: 400;
}