/* components/reusable/bootstrap-evf-card.css
   Purpose:
   - Provide shared EVF card and surface selectors.
   May contain:
   - Reusable card selectors that consume app color roles from the EVF color files
   - Short selector-local aliases for readability
   Must not contain:
   - Raw palette definitions
   - Long-lived global EVF tokens
   - Bootstrap token remaps
   - Page-local surface tweaks
   Dependencies:
   - Requires colors/bootstrap-evf-colors-base.css and colors/bootstrap-evf-colors-app.css to be loaded first.
   Scope:
   - Shared reusable component selectors only.
*/

.evf-public-card {
    --_card-bg: var(--evf-surface-card-bg);
    --_card-border: var(--evf-surface-card-border);
    --_card-highlight: var(--evf-surface-card-highlight);
    --_card-shadow-rgb: var(--evf-surface-card-shadow-rgb);

    background-color: var(--_card-bg) !important;
    background-image: linear-gradient(180deg, var(--_card-highlight), transparent 100%);
    border-color: var(--_card-border) !important;
    box-shadow:
        0 1rem 2rem rgba(var(--_card-shadow-rgb), 0.12),
        inset 0 1px 0 var(--_card-highlight);
}

.evf-public-card__title,
.evf-public-card__eyebrow {
    color: var(--evf-surface-card-title);
    font-weight: 600;
}

.evf-public-card__eyebrow {
    letter-spacing: 0.04em;
}

.evf-public-card__body {
    color: var(--evf-surface-card-muted) !important;
}

.evf-public-card__body code {
    color: var(--evf-surface-card-title);
}