:root {
    --clay-bg: #e8e7f4;
    --clay-surface: #e8e7f4;
    --clay-surface-soft: rgba(255, 255, 255, .38);
    --clay-text: #27304a;
    --clay-muted: #70778e;
    --clay-primary: var(--brand-primary, #6d5dfc);
    --clay-secondary: var(--brand-secondary, #f08bb4);
    --clay-accent: var(--brand-accent, #49c6b0);
    --clay-danger: #d55372;
    --clay-warning: #ed9e3f;
    --clay-success: #2fac8e;
    --clay-radius-xl: 30px;
    --clay-radius-lg: 22px;
    --clay-radius-md: 16px;
    --clay-shadow: 13px 13px 28px rgba(160, 158, 188, .58), -12px -12px 28px rgba(255, 255, 255, .86);
    --clay-shadow-sm: 7px 7px 16px rgba(160, 158, 188, .5), -7px -7px 16px rgba(255, 255, 255, .82);
    --clay-inset: inset 4px 4px 9px rgba(164, 161, 191, .5), inset -4px -4px 9px rgba(255, 255, 255, .85);
}

body {
    background:
        radial-gradient(circle at 4% 2%, rgba(255, 255, 255, .96), transparent 25rem),
        radial-gradient(circle at 95% 95%, color-mix(in srgb, var(--clay-secondary) 16%, transparent), transparent 34rem),
        var(--clay-bg);
    color: var(--clay-text);
}

.clay-card,
.modal-content,
.offcanvas,
.dropdown-menu {
    background: color-mix(in srgb, var(--clay-surface) 94%, white);
    border: 1px solid rgba(255, 255, 255, .76);
    border-radius: var(--clay-radius-xl);
    box-shadow: var(--clay-shadow);
}

.clay-soft {
    background: var(--clay-surface-soft);
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: var(--clay-radius-lg);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .75);
}

.clay-button,
.btn-primary {
    border: 0 !important;
    background: linear-gradient(145deg, color-mix(in srgb, var(--clay-primary) 86%, white), color-mix(in srgb, var(--clay-primary) 92%, black)) !important;
    color: white !important;
    border-radius: 16px !important;
    box-shadow: 7px 7px 15px rgba(158, 154, 190, .65), -6px -6px 14px rgba(255, 255, 255, .85), inset 2px 2px 4px rgba(255,255,255,.28) !important;
    transition: transform .18s ease, box-shadow .18s ease;
}

.clay-button:hover,
.btn-primary:hover { transform: translateY(-2px); }
.clay-button:active,
.btn-primary:active { transform: translateY(1px); box-shadow: var(--clay-inset) !important; }

.clay-icon {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 15px;
    background: var(--clay-surface);
    color: var(--clay-primary);
    box-shadow: var(--clay-shadow-sm);
}

.form-control,
.form-select,
.form-check-input,
.input-group-text {
    color: var(--clay-text);
    background-color: var(--clay-surface);
    border: 0;
    border-radius: 14px;
    box-shadow: var(--clay-inset);
}

.form-control:focus,
.form-select:focus {
    color: var(--clay-text);
    background: var(--clay-surface);
    box-shadow: var(--clay-inset), 0 0 0 3px color-mix(in srgb, var(--clay-primary) 20%, transparent);
}

.table { --bs-table-bg: transparent; --bs-table-color: var(--clay-text); }
.table > :not(caption) > * > * { border-color: rgba(93, 91, 124, .09); padding: .9rem .75rem; }

.badge-clay {
    background: color-mix(in srgb, var(--badge-color, var(--clay-primary)) 16%, white);
    color: color-mix(in srgb, var(--badge-color, var(--clay-primary)) 82%, black);
    border: 1px solid color-mix(in srgb, var(--badge-color, var(--clay-primary)) 28%, transparent);
    border-radius: 999px;
    padding: .42rem .72rem;
}