/* Paper-texture design tokens. Keep in sync with services/plots.py::_PAPER and
 * static/js/modules/plotly-theme.js. */

:root {
    /* ----- Colour palette ----- */
    --paper-cream: #F5EFE1;
    --paper-kraft: #E8DCC4;
    --paper-shadow: #C9B896;
    --paper-fog: #EEE5D1;

    --ink-umber: #3A2E22;
    --ink-walnut: #6B553C;
    --ink-mist: #8A7863;

    --accent-rust: #B5533C;
    --accent-rust-deep: #8B3A28;
    --accent-moss: #6B8E4E;
    --accent-moss-deep: #4F6E38;
    --accent-ochre: #D4A437;
    --accent-ochre-soft: #EDC978;
    --accent-ink: #1F3A5F;

    --surface-elev-0: transparent;
    --surface-elev-1: var(--paper-kraft);
    --surface-elev-2: var(--paper-cream);

    /* ----- Typography ----- */
    --font-display: "Source Serif 4", "Iowan Old Style", Georgia, serif;
    --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.25rem;
    --text-4xl: 3rem;
    --text-hero: 4.25rem;

    --leading-tight: 1.2;
    --leading-snug: 1.35;
    --leading-body: 1.6;
    --leading-relaxed: 1.75;

    /* ----- Spacing (4-step) ----- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --sp-8: 64px;
    --sp-9: 96px;

    /* ----- Radii ----- */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 10px;
    --radius-lg: 18px;
    --radius-pill: 999px;

    /* ----- Elevation ----- */
    --elev-1: 0 1px 2px rgba(58, 46, 34, 0.08);
    --elev-2: 0 8px 24px rgba(58, 46, 34, 0.10);
    --elev-3: 0 24px 64px rgba(58, 46, 34, 0.12);
    --elev-inset: inset 0 1px 0 rgba(255, 247, 232, 0.65);

    /* ----- Motion ----- */
    --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
    --dur-fast: 120ms;
    --dur-med: 240ms;
    --dur-slow: 420ms;

    /* ----- Layout ----- */
    --content-max: 1180px;
    --sidebar-w: 270px;
    --header-h: 88px;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-fast: 0ms;
        --dur-med: 0ms;
        --dur-slow: 0ms;
    }
}