/* Primary brand color sampled from the AdaLite mockup */
:root {
    --primary-pink: #d43976;
    --primary-pink-dark: #b02f62;
    --primary-error: #d8213a;
}

/* Utility classes that we reference in the HTML */
.bg-primary-pink {
    background-color: var(--primary-pink);
}
.bg-primary-pink-dark {
    background-color: var(--primary-pink-dark);
}
.text-primary-pink {
    color: var(--primary-pink);
}
.text-primary-error {
    color: var(--primary-error);
}
.border-primary-pink {
    border-color: var(--primary-pink);
}

/* Simple subtle shadow similar to the mockup cards */
.shadow-xs {
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

/* Nav link look */
.nav-link {
    position: relative;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 13px;
    font-weight: 500;
    color: #4b5563; /* slate-600-ish */
}

.nav-link:hover {
    color: #111827; /* slate-900-ish */
}

.nav-link-active {
    color: #111827;
}

/* Allow the “bg-primary-pink/xx” style feeling where Tailwind build may not provide it */
.bg-primary-pink\/10 {
    background-color: rgba(212, 57, 118, 0.1);
}
.bg-primary-pink\/30 {
    background-color: rgba(212, 57, 118, 0.3);
}
.bg-primary-pink\/60 {
    background-color: rgba(212, 57, 118, 0.6);
}