/*
 * tokens.css — single source of truth for the /info site's design language.
 *
 * This file is deliberately independent from src/styles/themes/variables.css
 * (the app's own token file, scoped by DESIGN_SYSTEM.md to src/styles/ only).
 * /info is a static, unbundled site — it never goes through Vite — so it
 * keeps its own small token set rather than reaching into the app build.
 * Values below echo the app's brand palette (--color-brand-primary/secondary)
 * so the two feel related, without being wired together.
 *
 * To restyle the whole site later: change values here. Every other file
 * under /info/assets only ever references var(--info-*) — never a raw
 * color, size, or shadow — so a full reskin is a one-file edit.
 */

:root {
    /* ---- Brand ---- */
    --info-brand-green: #74ac00;
    --info-brand-green-dark: #5c8900;
    --info-brand-red: #ac0028;

    /* ---- Surfaces & text (light, default) ---- */
    --info-bg: #fbfbf8;
    --info-bg-raised: #ffffff;
    --info-bg-sunken: #f2f1ea;
    --info-border: #e4e2d8;
    --info-text: #24261f;
    --info-text-muted: #5b5d52;
    --info-text-faint: #8a8c7f;
    --info-accent: var(--info-brand-green);
    --info-accent-contrast: #ffffff;
    --info-link: #4c7300;
    --info-shadow: rgba(30, 32, 20, 0.08);
    --info-shadow-strong: rgba(30, 32, 20, 0.16);

    /* ---- Continent heat scale (light) — low -> high representation ---- */
    --info-heat-0: #eeece2;
    --info-heat-1: #d3dfab;
    --info-heat-2: #a9c766;
    --info-heat-3: #74ac00;
    --info-heat-4: #4c7300;

    /* ---- Type ---- */
    --info-font-body: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
    --info-font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --info-size-xs: 0.8rem;
    --info-size-sm: 0.925rem;
    --info-size-md: 1.0625rem;
    --info-size-lg: 1.375rem;
    --info-size-xl: 1.875rem;
    --info-size-xxl: 2.75rem;
    --info-size-display: clamp(2.5rem, 5vw + 1rem, 4.25rem);
    --info-line-tight: 1.2;
    --info-line-normal: 1.6;
    --info-line-relaxed: 1.8;

    /* ---- Space ---- */
    --info-space-xxs: 0.25rem;
    --info-space-xs: 0.5rem;
    --info-space-sm: 0.875rem;
    --info-space-md: 1.5rem;
    --info-space-lg: 2.5rem;
    --info-space-xl: 4rem;
    --info-space-xxl: 6.5rem;

    /* ---- Shape ---- */
    --info-radius-sm: 6px;
    --info-radius-md: 12px;
    --info-radius-lg: 20px;
    --info-radius-pill: 999px;

    /* ---- Motion ---- */
    --info-duration: 220ms;
    --info-easing: cubic-bezier(0.22, 1, 0.36, 1);

    /* ---- Layout ---- */
    --info-content-width: 46rem;
    --info-wide-width: 72rem;
    --info-nav-height: 4.25rem;
}

/* Dark mode: system preference by default, overridden by the explicit
   [data-theme] attribute the toggle sets (see assets/js/theme.js). Keeping
   both means the page is correct on first paint (no flash) AND respects a
   manual override across visits. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --info-bg: #14150f;
        --info-bg-raised: #1c1e15;
        --info-bg-sunken: #101109;
        --info-border: #2c2e22;
        --info-text: #ecece2;
        --info-text-muted: #a7a996;
        --info-text-faint: #74766a;
        --info-accent: #8fce1f;
        --info-accent-contrast: #10120a;
        --info-link: #a3d94a;
        --info-shadow: rgba(0, 0, 0, 0.35);
        --info-shadow-strong: rgba(0, 0, 0, 0.55);

        --info-heat-0: #24261c;
        --info-heat-1: #3b4a1e;
        --info-heat-2: #5c7d1c;
        --info-heat-3: #8fce1f;
        --info-heat-4: #c3ef6c;
    }
}

:root[data-theme="dark"] {
    --info-bg: #14150f;
    --info-bg-raised: #1c1e15;
    --info-bg-sunken: #101109;
    --info-border: #2c2e22;
    --info-text: #ecece2;
    --info-text-muted: #a7a996;
    --info-text-faint: #74766a;
    --info-accent: #8fce1f;
    --info-accent-contrast: #10120a;
    --info-link: #a3d94a;
    --info-shadow: rgba(0, 0, 0, 0.35);
    --info-shadow-strong: rgba(0, 0, 0, 0.55);

    --info-heat-0: #24261c;
    --info-heat-1: #3b4a1e;
    --info-heat-2: #5c7d1c;
    --info-heat-3: #8fce1f;
    --info-heat-4: #c3ef6c;
}