:root {
    /* Palette Constants */
    --ink: #1A1208;
    --parchment: #F2EAD8;
    --sand: #E8D9BC;
    --dusk: #C08B5C;
    --terra: #A0451A;
    --amber: #D4A24C;
    --sage: #6B7B5A;
    --midnight: #0E0B06;
    --cream: #FAF6EE;
    --rust: #7A2E0E;

    /* Functional Tokens (Dark - Default) */
    --bg: var(--midnight);
    --surface: var(--ink);
    --text: var(--parchment);
    --text-muted: rgba(242, 234, 216, .85);
    --text-ghost: rgba(192, 139, 92, .15);
    --border: rgba(212, 162, 76, .25);
    --accent: var(--amber);
    --nav-bg: linear-gradient(to bottom, rgba(14, 11, 6, .9) 0%, transparent 100%);
    --contrast-surface: var(--parchment);
    --contrast-text: var(--ink);

    /* New Refined Tokens */
    --selector-bg: rgba(212, 162, 76, .04);
    --ticker-text: rgba(242, 234, 216, .85);
    --tag-border: rgba(192, 139, 92, .18);
    --tag-text: rgba(242, 234, 216, .64);
    --footer-sub: rgba(242, 234, 216, .58);
    --footer-link: rgba(242, 234, 216, .64);
    --footer-copy: rgba(242, 234, 216, .50);
    --footer-divider: rgba(242, 234, 216, .05);
    --nbox-star-bg: var(--midnight);
}

html.light {
    --bg: var(--cream);
    --surface: var(--parchment);
    --text: var(--ink);
    --text-muted: rgba(26, 18, 8, .8);
    --text-ghost: rgba(160, 69, 26, .12);
    --border: rgba(160, 69, 26, .2);
    --accent: var(--terra);
    --nav-bg: linear-gradient(to bottom, rgba(250, 246, 238, .9) 0%, transparent 100%);
    --contrast-surface: var(--midnight);
    --contrast-text: var(--parchment);

    /* New Refined Tokens - Light Overrides */
    --selector-bg: rgba(160, 69, 26, .04);
    --ticker-text: rgba(26, 18, 8, .8);
    --tag-border: rgba(160, 69, 26, .2);
    --tag-text: rgba(26, 18, 8, .68);
    --footer-sub: rgba(26, 18, 8, .62);
    --footer-link: rgba(26, 18, 8, .68);
    --footer-copy: rgba(26, 18, 8, .65);
    --footer-divider: rgba(160, 69, 26, .1);
    --nbox-star-bg: var(--cream);
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    overflow-x: hidden;
    overflow-wrap: break-word;
    transition: background 0.4s ease, color 0.4s ease;
}

#cursor,
#cdot {
    display: block;
}

/* Focus Styles */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 9000;
    opacity: 0.55;
    mix-blend-mode: overlay;
}

#cursor {
    width: 12px;
    height: 12px;
    border: 1.5px solid var(--accent);
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: width .2s, height .2s, background .2s;
}

#cursor.hover {
    width: 42px;
    height: 42px;
    background: rgba(212, 162, 76, .1);
}

#cdot {
    width: 3px;
    height: 3px;
    background: var(--accent);
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
}

#progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--terra), var(--accent));
    width: 0%;
    z-index: 8000;
}