:root {
    --cream: #faf8f5;
    --cream-2: #f2ede6;
    --stone: #e8e0d5;
    --warm-gray: #9c9188;
    --dark: #1c1a18;
    --dark-2: #3a3730;
    --accent: #c8a882;
    --accent-2: #8fa89e;
    --text: #2e2c29;
    --text-light: #7a7570;
    --text-on-dark: #faf8f5;
    --card-bg: rgba(255,255,255,0.7);
    --border: rgba(28,26,24,0.08);
    --nav-bg: rgba(250,248,245,0.88);
    --nav-bg-mobile: rgba(250,248,245,0.97);
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);

    /* Per-page override hooks */
    --blob-1: #e8d5c0;
    --blob-2: #c8d8d0;
    --blob-3: #d4c8e0;
}

body[data-theme='dark'] {
    --cream: #151311;
    --cream-2: #201c19;
    --stone: #2d2824;
    --warm-gray: #a59b91;
    --text: #f3ece4;
    --text-light: #bdb2a8;
    --text-on-dark: #f3ece4;
    --card-bg: rgba(30,26,23,0.76);
    --border: rgba(255,255,255,0.08);
    --nav-bg: rgba(21,19,17,0.88);
    --nav-bg-mobile: rgba(21,19,17,0.97);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'DM Sans', sans-serif;
    background: var(--cream);
    color: var(--text);
    line-height: 1.6;
    overflow-x: hidden;
    transition: background 0.25s ease, color 0.25s ease;
}

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

.bg-blobs {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.32;
    animation: drift 22s ease-in-out infinite;
    will-change: transform;
}

.b1 {
    width: 650px;
    height: 650px;
    background: var(--blob-1);
    top: -200px;
    left: -150px;
    animation-delay: 0s;
}

.b2 {
    width: 500px;
    height: 500px;
    background: var(--blob-2);
    top: 40%;
    right: -120px;
    animation-delay: 8s;
}

.b3 {
    width: 420px;
    height: 420px;
    background: var(--blob-3);
    bottom: -80px;
    left: 28%;
    animation-delay: 16s;
}

@keyframes drift {
    0%,100% { transform: translate(0,0) scale(1); }
    33% { transform: translate(45px,-55px) scale(1.06); }
    66% { transform: translate(-35px,40px) scale(0.94); }
}