@import url('root/_colors.css');
@import url('root/_depth.css');
@import url('root/_spacing.css');
@import url('root/_typography.css');

@import url('ui/_branding.css');
@import url('ui/_layout.css');
@import url('ui/_motion.css');

@import url('elements/_canvas.css');
@import url('elements/_reset.css');
@import url('elements/_typography.css');

@import url('components/_accordion.css');
@import url('components/_card.css');
@import url('components/_mobile-crumbs.css');
@import url('components/_other.css');
@import url('components/_wave-card.css');
@import url('components/_service-options.css');

@import url('util/_colors.css');
@import url('util/_depth.css');
@import url('util/_display.css');
@import url('util/_layout.css');
@import url('util/_typography.css');


/* --- Success Badge (Brand Colors) --- */
.badge-success {
    background-color: rgba(0, 160, 164, 0.1); /* 10% Opacity of brand color */
    color: var(--ui-clr-brand, #007bff);       /* Your Brand Color */
    border: 1px solid rgba(0, 160, 164, 0.3);
}

/* --- Failure Badge (Red) --- */
.badge-failure {
    background-color: #fff5f5;                 /* Very soft red wash */
    color: #fa6a61;                            /* Your --clr-red */
    border: 1px solid #feb2b2;
}

/* --- Interactive Polish --- */
[class^="badge-"] {
    transition: transform 0.1s ease-in-out, filter 0.2s;
    padding: 0.5rem;
    border-radius: var(--ui-border-radius);
}

[class^="badge-"]:hover {
    filter: saturate(1.2);
    transform: translateY(-1px);
}