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

.proaudit-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;

    /* ── Warm design tokens (Mockup Q) ───────────────── */
    --warm-bg: #F5F2EC;
    --warm-bg-end: #EDE8E0;
    --warm-shadow: 0 2px 8px rgba(90, 74, 53, 0.08), 0 8px 24px rgba(90, 74, 53, 0.06);
    --warm-shadow-hover: 0 4px 12px rgba(90, 74, 53, 0.12), 0 12px 32px rgba(90, 74, 53, 0.08);
    --warm-text-muted: #6B5B45;
    --warm-text-secondary: rgba(107, 91, 69, 0.8);
    --warm-card-bg: #ffffff;
    --warm-card-border: rgba(90, 74, 53, 0.06);
    --warm-badge-bg: #F5F2EC;
    --warm-badge-text: #8B7355;

    /* Dark hero tokens */
    --hero-gradient-start: #1a1a2e;
    --hero-gradient-end: #16213e;
    --hero-text: #ffffff;
    --hero-text-dim: rgba(255, 255, 255, 0.45);
    --hero-text-mid: rgba(255, 255, 255, 0.7);
    --hero-meta-bg: rgba(255, 255, 255, 0.08);
    --hero-meta-border: rgba(255, 255, 255, 0.1);
    --hero-adas-color: #5c9bd4;

    /* Impact color tokens */
    --impact-adas: #5c35a9;
    --impact-high: #bf1a2a;
    --impact-moderate: #dd9142;
    --impact-low: #b39332;
    --impact-advisory: #00a69c;
    --impact-oemprocedure: #1565c0;
}

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

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

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

.proaudit-report .delay-1 { animation-delay: 0.06s; }
.proaudit-report .delay-2 { animation-delay: 0.12s; }

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

/* ---- Accept sweep-out animation ---- */
@keyframes acceptSweepOut {
    from   { opacity: 1; transform: translateX(0) scale(1); }
    50%    { opacity: 0.8; transform: translateX(8px) scale(0.98); }
    to     { opacity: 0; transform: translateX(40px) scale(0.95); }
}

.proaudit-report .accept-exit {
    animation: acceptSweepOut 300ms ease-in both;
    pointer-events: none;
}

/* ---- Deny fade-out animation ---- */
@keyframes denyFadeOut {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(0.92); }
}

.proaudit-report .deny-exit {
    animation: denyFadeOut 250ms ease-in both;
    pointer-events: none;
}

/* ---- Reduced motion: accept/deny ---- */
@media (prefers-reduced-motion: reduce) {
    .proaudit-report .accept-exit,
    .proaudit-report .deny-exit {
        animation: none;
        opacity: 0;
        transform: none;
    }
}

/* ---- Completion bounce (walkthrough celebration) ---- */
@keyframes completionBounce {
    0%   { transform: scale(0); opacity: 0; }
    50%  { transform: scale(1.15); opacity: 1; }
    70%  { transform: scale(0.95); }
    100% { transform: scale(1); }
}

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

.proaudit-report .proaudit-skeleton {
    background: linear-gradient(90deg,
        rgba(50, 50, 50, 0.06) 25%,
        rgba(50, 50, 50, 0.12) 50%,
        rgba(50, 50, 50, 0.06) 75%);
    background-size: 400% 100%;
    animation: skeletonShimmer 1.8s ease infinite;
    border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
    .proaudit-report .proaudit-skeleton {
        animation: none;
        background: rgba(50, 50, 50, 0.06);
    }
}

/* ---- Tier transition banner ---- */
.proaudit-report .tier-transition-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: color-mix(in srgb, var(--transition-color) 6%, transparent);
    border-left: 3px solid var(--transition-color);
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-secondary, rgba(50, 50, 50, 0.65));
}

.proaudit-report .tier-transition-icon {
    color: var(--transition-color);
    display: flex;
    align-items: center;
}

/* ---- Walkthrough button pulse (when accepted card flies to it) ---- */
@keyframes walkthroughPulse {
    0%   { box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.7), 0 0 8px rgba(46, 125, 50, 0.3); transform: scale(1); }
    25%  { box-shadow: 0 0 0 6px rgba(46, 125, 50, 0.35), 0 0 20px rgba(46, 125, 50, 0.25); transform: scale(1.08); }
    50%  { box-shadow: 0 0 0 12px rgba(164, 205, 57, 0.15), 0 0 12px rgba(46, 125, 50, 0.1); transform: scale(1.03); }
    100% { box-shadow: 0 0 0 20px rgba(164, 205, 57, 0), 0 0 0 rgba(46, 125, 50, 0); transform: scale(1); }
}

.walkthrough-pulse {
    animation: walkthroughPulse 0.9s ease-out !important;
}

@media (prefers-reduced-motion: reduce) {
    .walkthrough-pulse {
        animation: none !important;
    }
}