/* ==========================================================================
   Design tokens — "paper & ink" editorial system with a single signal colour.
   Light is the primary edition; dark is a deliberate night edition.
   ========================================================================== */

:root {
    color-scheme: light;

    /* Palette */
    --paper: #f3efe6;
    --paper-raised: #ebe5d8;
    --ink: #16140f;
    --ink-soft: #46423a;
    --ink-muted: #6a655a;
    --rule: rgb(22 20 15 / 0.14);
    --rule-strong: #16140f;
    --grid-line: rgb(22 20 15 / 0.055);

    --signal: #e4471a;          /* fills, strokes, large type */
    --signal-ink: #b5360e;      /* small text on paper (AA) */
    --signal-wash: rgb(228 71 26 / 0.12);
    --on-signal: #16140f;

    --inverse-bg: #16140f;
    --inverse-fg: #f3efe6;
    --inverse-muted: #a39d8f;
    --inverse-rule: rgb(243 239 230 / 0.18);
    --inverse-signal: #ff6b3d;

    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.09 0 0 0 0 0.08 0 0 0 0 0.06 0 0 0 0.13 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

    /* Typography */
    --font-display: 'Instrument Serif', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
    --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'Geist Mono', ui-monospace, 'Cascadia Mono', 'SFMono-Regular', Menlo, monospace;

    --text-2xs: 0.6875rem;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
    --text-lg: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem);
    --text-xl: clamp(1.375rem, 1.15rem + 1vw, 2rem);
    --text-2xl: clamp(1.875rem, 1.3rem + 2.4vw, 3.5rem);
    --text-3xl: clamp(2.75rem, 1.6rem + 4.8vw, 5.75rem);
    --text-display: clamp(3rem, 1rem + 8vw, 9rem);
    --text-hero: clamp(3.25rem, 0.9rem + 13.6vw, 13.75rem);

    --tracking-label: 0.08em;

    /* Space & layout */
    --gutter: clamp(1rem, 0.4rem + 2.6vw, 2.5rem);
    --section-space: clamp(4.5rem, 2.5rem + 6vw, 8rem);
    --shell-max: 1360px;
    --masthead-h: 4rem;

    --radius-sm: 2px;
    --radius-pill: 999px;

    /* Motion */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --duration-fast: 160ms;
    --duration-normal: 320ms;
    --duration-slow: 900ms;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;

        --paper: #12110d;
        --paper-raised: #1b1915;
        --ink: #ece7dc;
        --ink-soft: #bdb7aa;
        --ink-muted: #948e80;
        --rule: rgb(236 231 220 / 0.14);
        --rule-strong: #ece7dc;
        --grid-line: rgb(236 231 220 / 0.045);

        --signal: #ff6b3d;
        --signal-ink: #ff825a;
        --signal-wash: rgb(255 107 61 / 0.14);
        --on-signal: #12110d;

        --inverse-bg: #ece7dc;
        --inverse-fg: #12110d;
        --inverse-muted: #5a5549;
        --inverse-rule: rgb(18 17 13 / 0.18);
        --inverse-signal: #b5360e;

        --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.98 0 0 0 0 0.94 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }
}