/* ==========================================================================
   Audix Variables - Shared CSS custom properties for the Audix dashboard.
   Applied via the `.audix-report` selector so child components inherit
   these variables through DOM ancestry.
   ========================================================================== */

.audix-report {
    /* Brand colors */
    --brand-red: #bf1a2a;
    --brand-red-light: rgba(191, 26, 42, 0.06);
    --brand-orange: #dd9142;
    --brand-orange-light: rgba(221, 145, 66, 0.08);
    --brand-gold: #b39332;
    --brand-gold-light: rgba(179, 147, 50, 0.08);
    --brand-teal: #00a69c;
    --brand-teal-light: rgba(0, 166, 156, 0.08);
    --brand-teal-mid: rgba(0, 166, 156, 0.15);
    --brand-green: #a4cd39;
    --brand-green-light: rgba(164, 205, 57, 0.1);
    --brand-charcoal: #323232;

    /* Surface colors */
    --surface: #ffffff;
    --surface-dim: #f7f7f6;

    /* Text colors */
    --text-primary: #323232;
    --text-secondary: rgba(50, 50, 50, 0.65);
    --text-muted: rgba(50, 50, 50, 0.45);

    /* Border colors */
    --border: rgba(50, 50, 50, 0.08);
    --border-strong: rgba(50, 50, 50, 0.15);

    /* Spacing and radii */
    --radius: 14px;
    --radius-sm: 8px;
}

/* ==========================================================================
   Shared utility classes - used by multiple Audix components
   ========================================================================== */

/* ---- Impact badges ---- */
.audix-report .impact-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 5px;
    border-radius: 4px;
    font-size: 0.625rem;
    font-weight: 700;
    color: white;
}

.audix-report .impact-high     { background: var(--brand-red); }
.audix-report .impact-moderate { background: var(--brand-orange); }
.audix-report .impact-low      { background: var(--brand-gold); }
.audix-report .impact-advisory { background: var(--brand-teal); }

/* ---- Fade-in-up animation ---- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.audix-report .fade-in-up {
    animation: fadeInUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.audix-report .delay-1 { animation-delay: 0.06s; }
.audix-report .delay-2 { animation-delay: 0.12s; }
.audix-report .delay-3 { animation-delay: 0.18s; }
.audix-report .delay-4 { animation-delay: 0.24s; }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .audix-report .fade-in-up {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* ---- Skeleton shimmer (for custom skeleton shapes) ---- */
@keyframes skeletonShimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}