:root {
    --font-display: 'Fraunces', Georgia, serif;
    --font-body: 'Manrope', 'Segoe UI', sans-serif;
    --surface-main: #faf5d9;
    --surface-card: rgba(250, 245, 217, 0.92);
    --border-soft: rgba(122, 58, 48, 0.16);
    --shadow-soft: 0 12px 26px -18px rgba(122, 58, 48, 0.45);
}

body {
    font-family: var(--font-body);
    background:
        radial-gradient(1000px 420px at 20% 10%, rgba(122, 58, 48, 0.16), transparent 60%),
        radial-gradient(900px 420px at 80% 90%, rgba(178, 82, 69, 0.14), transparent 62%),
        linear-gradient(180deg, #faf5d9 0%, #e3ecb9 48%, #f2b18f 100%) !important;
    color: #2f2218;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}

nav.bg-clay-800 {
    background: linear-gradient(120deg, rgba(122, 58, 48, 0.95), rgba(178, 82, 69, 0.95));
}

.bg-white.rounded-lg.shadow,
.bg-white.rounded-lg.shadow-md {
    background: var(--surface-card) !important;
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-soft);
}

.sortable-drag {
    opacity: 1;
}

.sortable-ghost {
    opacity: 0.4;
    background-color: var(--clay-50);
}

.stage-row::-webkit-scrollbar {
    height: 8px;
}

.stage-row::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.stage-row::-webkit-scrollbar-thumb {
    background: var(--clay-500);
    border-radius: 4px;
}

.stage-row::-webkit-scrollbar-thumb:hover {
    background: var(--clay-600);
}

.text-clay-700.hover\:text-clay-800:hover,
.text-clay-600.hover\:text-clay-800:hover {
    filter: brightness(0.9);
}

.btn-add-accent {
    background: var(--clay-200);
    color: var(--clay-800) !important;
    border: 1px solid rgba(122, 58, 48, 0.2);
    border-radius: 9999px;
    box-shadow:
        0 6px 14px -12px rgba(122, 58, 48, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}

.btn-add-accent:hover {
    color: var(--clay-800) !important;
    background: var(--clay-100);
    box-shadow:
        0 10px 20px -14px rgba(122, 58, 48, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.btn-add-accent:focus-visible {
    outline: 2px solid rgba(203, 127, 100, 0.45);
    outline-offset: 2px;
}