/* ==========================================================================
   The Puzzleboard — Design Tokens & Base Styles
   Heritage 1920s aesthetic with Art Deco influences
   ========================================================================== */

:root {
    /* Palette — muted heritage with one strong accent */
    --pb-cream: #F5F0E8;
    --pb-charcoal: #2C2C2C;
    --pb-gold: #C5A55A;
    --pb-burgundy: #6B2D3E;
    --pb-sage: #8A9A7B;

    /* Typography */
    --pb-font-display: 'Playfair Display', Georgia, serif;
    --pb-font-body: 'Lora', 'Times New Roman', serif;
    --pb-font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* Spacing scale */
    --pb-space-xs: 0.25rem;
    --pb-space-sm: 0.5rem;
    --pb-space-md: 1rem;
    --pb-space-lg: 2rem;
    --pb-space-xl: 4rem;
}

/* Base styles */
body {
    font-family: var(--pb-font-body);
    color: var(--pb-charcoal);
    background-color: var(--pb-cream);
    line-height: 1.6;
    margin: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--pb-font-display);
    font-weight: 700;
    line-height: 1.2;
    color: var(--pb-charcoal);
}

a {
    color: var(--pb-burgundy);
    text-decoration: underline;
}

a:hover {
    color: var(--pb-gold);
}

/* Scroll depth tracking sentinel — offscreen and non-interactive */
.scroll-depth-sentinel {
    height: 1px;
    width: 1px;
    position: absolute;
    left: -9999px;
    pointer-events: none;
}