/*
 * TPR Unified design tokens.
 *
 * These custom properties are the shared visual contract used by every TPR
 * section. Section modules may override the tokens, but should avoid hardcoded
 * colours and spacing wherever a token already exists.
 */
:root {
    color-scheme: light;

    /* Type families */
    --tpr-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --tpr-font-display: "Arial Narrow", "Aptos Display", Impact, Haettenschweiler, sans-serif;
    --tpr-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

    /* Fluid type scale */
    --tpr-text-xs: clamp(0.72rem, 0.69rem + 0.12vw, 0.8rem);
    --tpr-text-sm: clamp(0.84rem, 0.8rem + 0.15vw, 0.94rem);
    --tpr-text-base: clamp(1rem, 0.96rem + 0.18vw, 1.12rem);
    --tpr-text-lg: clamp(1.12rem, 1.04rem + 0.3vw, 1.34rem);
    --tpr-text-xl: clamp(1.35rem, 1.18rem + 0.7vw, 1.85rem);
    --tpr-text-2xl: clamp(1.75rem, 1.42rem + 1.25vw, 2.7rem);
    --tpr-text-3xl: clamp(2.4rem, 1.7rem + 2.6vw, 4.75rem);
    --tpr-text-4xl: clamp(3.4rem, 2.15rem + 4.8vw, 7.5rem);

    /* Spacing scale */
    --tpr-space-1: 0.25rem;
    --tpr-space-2: 0.5rem;
    --tpr-space-3: 0.75rem;
    --tpr-space-4: 1rem;
    --tpr-space-5: 1.25rem;
    --tpr-space-6: 1.5rem;
    --tpr-space-8: 2rem;
    --tpr-space-10: 2.5rem;
    --tpr-space-12: 3rem;
    --tpr-space-16: 4rem;
    --tpr-space-20: 5rem;
    --tpr-space-24: 6rem;
    --tpr-space-section: clamp(3.5rem, 6vw, 7rem);

    /* Neutral palette */
    --tpr-navy: #081e30;
    --tpr-coral: #cf5967;
    --tpr-teal: #75a9aa;
    --tpr-cream: #f7f0df;
    --tpr-black: #081e30;
    --tpr-charcoal: #142f42;
    --tpr-ink: #0d2638;
    --tpr-text: #263746;
    --tpr-muted: #686b6d;
    --tpr-subtle: #8b8e90;
    --tpr-line: #d8d4cc;
    --tpr-line-strong: #bdb8ae;
    --tpr-paper: #f3ead9;
    --tpr-paper-deep: #e7dbc8;
    --tpr-surface: #faf5ea;
    --tpr-card: #fffaf0;
    --tpr-white: #ffffff;

    /* Section palette defaults */
    --tpr-accent: #cf5967;
    --tpr-accent-rgb: 207, 89, 103;
    --tpr-accent-strong: #9f3f4c;
    --tpr-accent-soft: #f2d7d9;
    --tpr-accent-contrast: #ffffff;
    --tpr-section-paper: var(--tpr-paper);
    --tpr-section-ink: var(--tpr-ink);
    --tpr-section-header: var(--tpr-black);
    --tpr-header-text: #ffffff;
    --tpr-footer-bg: var(--tpr-black);
    --tpr-footer-text: #ffffff;
    --tpr-hero-overlay: #050909;

    /* Layout */
    --tpr-shell: 1240px;
    --tpr-shell-wide: 1540px;
    --tpr-content: 820px;
    --tpr-gutter: clamp(1rem, 3vw, 2.5rem);
    --tpr-grid-gap: clamp(1rem, 2.2vw, 1.75rem);
    --tpr-header-height: 78px;

    /* Shape */
    --tpr-radius-xs: 2px;
    --tpr-radius-sm: 6px;
    --tpr-radius-md: 12px;
    --tpr-radius-lg: 18px;
    --tpr-radius-xl: 28px;
    --tpr-radius-pill: 999px;
    --tpr-radius: var(--tpr-radius-lg);
    --tpr-control-radius: var(--tpr-radius-xs);

    /* Elevation */
    --tpr-shadow-sm: 0 4px 18px rgba(13, 15, 16, 0.08);
    --tpr-shadow-md: 0 18px 48px rgba(13, 15, 16, 0.12);
    --tpr-shadow-lg: 0 30px 90px rgba(13, 15, 16, 0.18);
    --tpr-ring: 0 0 0 3px rgba(var(--tpr-accent-rgb), 0.28);

    /* Motion */
    --tpr-duration-fast: 140ms;
    --tpr-duration: 220ms;
    --tpr-duration-slow: 420ms;
    --tpr-ease: cubic-bezier(0.2, 0.75, 0.25, 1);

    /* Compatibility aliases used by the v0.2 templates */
    --tpr-bg: var(--tpr-surface);
}

body.tpr-hub {
    --tpr-accent: #cf5967;
    --tpr-accent-rgb: 207, 89, 103;
    --tpr-accent-strong: #9f3f4c;
    --tpr-accent-soft: #f2d7d9;
}

body.tpr-section-motors {
    --tpr-accent: #e85b68;
    --tpr-accent-rgb: 232, 91, 104;
    --tpr-accent-strong: #b83f4f;
    --tpr-accent-soft: #f5d9dc;
    --tpr-section-paper: #f3ead9;
    --tpr-section-header: #081e30;
    --tpr-control-radius: 6px;
}

body.tpr-section-gaming {
    --tpr-accent: #7256ff;
    --tpr-accent-rgb: 114, 86, 255;
    --tpr-accent-strong: #4c34c9;
    --tpr-accent-soft: #dfd9ff;
    --tpr-section-paper: #eeebf7;
    --tpr-section-header: #11101a;
    --tpr-control-radius: 6px;
}

body.tpr-section-movies {
    --tpr-accent: #c43c55;
    --tpr-accent-rgb: 196, 60, 85;
    --tpr-accent-strong: #8f2538;
    --tpr-accent-soft: #f4d5db;
    --tpr-section-paper: #f2e8e5;
    --tpr-section-header: #120d0f;
    --tpr-control-radius: 2px;
}

body.tpr-section-toys {
    --tpr-accent: #ec8b32;
    --tpr-accent-rgb: 236, 139, 50;
    --tpr-accent-strong: #b55e14;
    --tpr-accent-soft: #f8e2cd;
    --tpr-section-paper: #f4ecdf;
    --tpr-section-header: #15110d;
    --tpr-control-radius: 10px;
}

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