:root {
    --digitales-purple: #6B3691;
    --digitales-purple-dark: #4D246A;
    --digitales-purple-soft: #F4EFF8;
    --digitales-gold: #FCC133;
    --digitales-gold-soft: #FFF8DE;
    --digitales-ink: #18131E;
    --digitales-sidebar: #17111F;
    --digitales-sidebar-hover: #251B30;
    --digitales-page: #F7F5F9;
}

/* Global application shell */
body {
    background-color: var(--digitales-page);
}

.digitales-sidebar {
    background: linear-gradient(180deg, #17111F 0%, #201529 100%) !important;
}

.digitales-logo-shell {
    background: #120D18 !important;
    border-color: rgba(252, 193, 51, .16) !important;
}

.digitales-nav-active {
    background: linear-gradient(135deg, var(--digitales-purple) 0%, #7E49A3 100%) !important;
    color: #fff !important;
    box-shadow: 0 10px 26px rgba(107, 54, 145, .24) !important;
}

.digitales-avatar {
    background: linear-gradient(135deg, var(--digitales-purple) 0%, #7E49A3 100%) !important;
    color: #fff !important;
}

.digitales-profile-gradient {
    background: linear-gradient(135deg, var(--digitales-purple) 0%, #4D246A 100%) !important;
}

.digitales-gold-dot,
.digitales-gold-text {
    color: var(--digitales-gold) !important;
}

/*
 * The project uses Tailwind CDN classes throughout the existing views.
 * These overrides let the whole current application adopt the Digitales
 * palette without rewriting every page.
 */
.bg-purple-600 {
    background-color: var(--digitales-purple) !important;
}

.bg-purple-50 {
    background-color: var(--digitales-purple-soft) !important;
}

.text-purple-600,
.text-purple-700 {
    color: var(--digitales-purple) !important;
}

.border-purple-200 {
    border-color: #DBCBE6 !important;
}

.border-purple-500,
.focus\:border-purple-500:focus {
    border-color: var(--digitales-purple) !important;
}

.hover\:bg-purple-700:hover {
    background-color: var(--digitales-purple-dark) !important;
}

.hover\:bg-purple-50:hover {
    background-color: var(--digitales-purple-soft) !important;
}

.hover\:text-purple-600:hover,
.hover\:text-purple-700:hover {
    color: var(--digitales-purple) !important;
}

.focus\:ring-purple-500:focus {
    --tw-ring-color: rgba(107, 54, 145, .45) !important;
}

.focus\:ring-purple-500\/10:focus {
    --tw-ring-color: rgba(107, 54, 145, .10) !important;
}

.focus\:ring-purple-500\/20:focus {
    --tw-ring-color: rgba(107, 54, 145, .20) !important;
}

.shadow-purple-600\/20 {
    --tw-shadow-color: rgba(107, 54, 145, .20) !important;
}

.from-purple-600 {
    --tw-gradient-from: var(--digitales-purple) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(107 54 145 / 0) var(--tw-gradient-to-position) !important;
}

.to-indigo-600,
.to-indigo-700 {
    --tw-gradient-to: var(--digitales-purple-dark) var(--tw-gradient-to-position) !important;
}

.text-purple-100 {
    color: #F1E8F7 !important;
}

/* Reusable brand helpers */
.digitales-brand-button {
    background: linear-gradient(135deg, var(--digitales-purple), #7E49A3) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(107, 54, 145, .20);
}

.digitales-brand-button:hover {
    background: linear-gradient(135deg, var(--digitales-purple-dark), var(--digitales-purple)) !important;
}

.digitales-accent-button {
    background: var(--digitales-gold) !important;
    color: #251A0A !important;
}

.digitales-soft-panel {
    background: linear-gradient(135deg, #FFFFFF 0%, var(--digitales-purple-soft) 100%);
    border-color: #E6DBEE !important;
}