:root {
    /* Core palette */
    --color-soft-yellow: #E9BF52;
    --color-olive-green: #71964B;
    --color-fresh-teal: #16B7B1;
    --color-aqua-blue: #56B7CA;
    --color-sky-blue: #00CCFF;
    --color-deep-navy: #02294F;
    --color-pure-white: #FFFFFF;
    --color-off-white: #F1EDE5;
    --color-soft-orange: #FFBA00;
    --color-strong-orange: #FF8A00;
    --color-coral-red: #F25242;
    --color-teal-dark: #00899A;
    --color-green: #00A240;
    --color-purple: #8062C6;
    --color-royal-blue: #184682;
    --color-black: #000000;

    /* Dark palette */
    --color-dark-bg-primary: #0C1116;
    --color-dark-bg-secondary: #131A22;
    --color-dark-card: #18222E;
    --color-dark-text-primary: #FFFFFF;
    --color-dark-text-secondary: #A9B3BC;
    --color-dark-accent-teal: #16B7B1;
    --color-dark-accent-blue: #00CCFF;
    --color-dark-accent-orange: #FF8A00;

    /* Helpful RGB aliases for translucency */
    --color-royal-blue-rgb: 24, 70, 130;
    --color-deep-navy-rgb: 2, 41, 79;
    --color-aqua-blue-rgb: 86, 183, 202;
    --color-sky-blue-rgb: 0, 204, 255;
    --color-fresh-teal-rgb: 22, 183, 177;
    --color-teal-dark-rgb: 0, 137, 154;
    --color-pure-white-rgb: 255, 255, 255;
    --color-soft-yellow-rgb: 233, 191, 82;
    --color-soft-orange-rgb: 255, 186, 0;
    --color-strong-orange-rgb: 255, 138, 0;
    --color-olive-green-rgb: 113, 150, 75;
    --color-green-rgb: 0, 162, 64;
    --color-coral-red-rgb: 242, 82, 66;
    --color-purple-rgb: 128, 98, 198;
    --color-off-white-rgb: 241, 237, 229;

    /* Surface tone helpers */
    --card-tone-blue: linear-gradient(180deg, rgba(var(--color-sky-blue-rgb), 0.12), rgba(var(--color-aqua-blue-rgb), 0.14));
    --card-tone-green: linear-gradient(180deg, rgba(var(--color-olive-green-rgb), 0.12), rgba(var(--color-green-rgb), 0.16));
    --card-tone-yellow: linear-gradient(180deg, rgba(var(--color-soft-yellow-rgb), 0.16), rgba(var(--color-soft-orange-rgb), 0.14));
    --card-tone-orange: linear-gradient(180deg, rgba(var(--color-soft-orange-rgb), 0.16), rgba(var(--color-strong-orange-rgb), 0.18));
    --card-tone-border: rgba(var(--color-deep-navy-rgb), 0.1);
    --card-tone-shadow: 0 18px 45px rgba(var(--color-royal-blue-rgb), 0.12);
    --card-tone-hover-shadow: 0 26px 70px rgba(var(--color-royal-blue-rgb), 0.16);
}

body {
    background-color: var(--color-off-white);
    color: var(--color-royal-blue);
}

.surface-card {
    background: var(--color-pure-white);
    border: 1px solid rgba(var(--color-deep-navy-rgb), 0.12);
    box-shadow: 0 16px 36px rgba(var(--color-royal-blue-rgb), 0.08);
    border-radius: 16px;

    animation: surfaceDrift 16s ease infinite;
}

.surface-muted {
    background: linear-gradient(160deg, rgba(var(--color-aqua-blue-rgb), 0.2), rgba(var(--color-soft-orange-rgb), 0.14));
    border: 1px solid rgba(var(--color-deep-navy-rgb), 0.12);
    border-radius: 12px;
}

.text-primary-ink { color: var(--color-deep-navy); }
.text-muted-ink { color: rgba(var(--color-deep-navy-rgb), 0.72); }

.bg-accent-cool {
    background: linear-gradient(135deg, rgba(var(--color-aqua-blue-rgb), 0.28), rgba(var(--color-sky-blue-rgb), 0.24));
}

.bg-accent-warm {
    background: linear-gradient(135deg, rgba(var(--color-soft-yellow-rgb), 0.32), rgba(var(--color-strong-orange-rgb), 0.2));
}

.card-tone-blue { background: var(--card-tone-blue); }
.card-tone-green { background: var(--card-tone-green); }
.card-tone-yellow { background: var(--card-tone-yellow); }
.card-tone-orange { background: var(--card-tone-orange); }

.card-tone-blue,
.card-tone-green,
.card-tone-yellow,
.card-tone-orange {
    border: 1px solid var(--card-tone-border);
    box-shadow: var(--card-tone-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.card-tone-blue:hover,
.card-tone-green:hover,
.card-tone-yellow:hover,
.card-tone-orange:hover {
    transform: translateY(-6px);
    box-shadow: var(--card-tone-hover-shadow);
    border-color: rgba(var(--color-royal-blue-rgb), 0.18);
}

@keyframes surfaceDrift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

html[data-bs-theme='dark'] {
    --card-tone-blue: linear-gradient(180deg, rgba(var(--color-sky-blue-rgb), 0.18), rgba(var(--color-fresh-teal-rgb), 0.2));
    --card-tone-green: linear-gradient(180deg, rgba(var(--color-green-rgb), 0.26), rgba(var(--color-olive-green-rgb), 0.2));
    --card-tone-yellow: linear-gradient(180deg, rgba(var(--color-soft-yellow-rgb), 0.22), rgba(var(--color-strong-orange-rgb), 0.18));
    --card-tone-orange: linear-gradient(180deg, rgba(var(--color-strong-orange-rgb), 0.24), rgba(var(--color-soft-orange-rgb), 0.2));
    --card-tone-border: rgba(var(--color-off-white-rgb), 0.35);
    --card-tone-shadow: 0 18px 45px rgba(0, 0, 0, 0.3);
    --card-tone-hover-shadow: 0 26px 70px rgba(0, 0, 0, 0.35);
}