/* ═══════════════════════════════════════════════════════════════════
   components/cards.css

   Card components using semantic tokens.
   No theme-specific selectors — all theming via token swaps.

   This file previously had two duplicate rule blocks (one with the new
   `--font-weight-*` / `--font-size-*` / `--color-text-*` token names,
   one with the legacy `--font-*` / `--text-*` aliases). The two copies
   set slightly different values on a few properties (.card:hover
   border-color, .stat-card background and box-shadow), so the second
   block was winning per-property cascade. This deduplicated version
   uses the new token names but keeps the values the second block was
   supplying — runtime output is unchanged from the duplicated state.
   ═══════════════════════════════════════════════════════════════════ */

@layer components {
    /* CARD UNIFICATION (2026-05-28)
       ─────────────────────────────────────────────────────────────────
       The app previously had TWO competing card patterns:
         - Plain `.card` (Bootstrap defaults) — 1,260 view usages
         - `.card.app-panel` (the app's refined variant) — 1,003 view usages
       Two patterns producing slightly different card chrome across the
       same page. Standardized 2026-05-28: every `.card` now gets the
       app-panel look automatically. The `.app-panel` modifier became a
       no-op alias for backward compatibility; existing usages still work.
       Future code should drop `.app-panel` since `.card` alone is the
       canonical pattern now. */
    .card {
        background: var(--card-bg);
        /* Border removed — card separation achieved through
           surface contrast + elevation shadow (border reduction, P1). */
        border: 0;
        border-radius: var(--radius-lg);
        box-shadow: var(--elevation-1);
        margin-bottom: 0;
        transition:
            box-shadow var(--duration-fast) var(--ease-smooth),
            transform var(--duration-fast) var(--ease-smooth);
    }

    .card:hover {
        box-shadow: var(--elevation-2);
        transform: translateY(-2px);
    }

    /* Honor OS-level reduced-motion preference (WCAG 2.3.3). Users with
       vestibular sensitivity won't see the lift; the elevation change
       still happens so the hover signal is preserved. */
    @media (prefers-reduced-motion: reduce) {
        .card { transition: box-shadow var(--duration-fast) var(--ease-smooth); }
        .card:hover { transform: none; }
    }

    /* Card-header — unified to the legacy `.app-panel .card-header` look.
       Uppercase, wide-tracked, slate-700, brand-tinted leading icon.
       This was the canonical app pattern (1,003 usages) and is now the
       default for all 2,263+ card-headers across the codebase. */
    .card-header {
        background: transparent;
        border-bottom: 1px solid var(--card-border);
        font-weight: 600;
        font-size: var(--type-card-title);
        color: var(--color-text-secondary);
        padding: 0.875rem 1.125rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }
    /* Leading icon in card-header — brand-tinted (was `var(--cloud)` in
       legacy, which redirects to `--color-primary` post-unification). */
    .card-header > i:first-child {
        color: var(--color-primary);
        font-size: 0.6875rem;
    }

    .card-body {
        padding: 1rem 1.125rem;
    }

    .card-footer {
        background: transparent;
        border-top: 1px solid var(--card-border);
        padding: 0.875rem 1.125rem;
    }

    /* Mobile responsive override — tighter padding + slightly smaller
       header. Inherited from the legacy `.app-panel` @media block. */
    @media (max-width: 767.98px) {
        .card-header {
            font-size: var(--type-card-title);
            padding: 0.75rem;
        }
        .card-body {
            padding: 0.75rem;
        }
    }

    /* .stat-card / .stat-card .stat-value / .stat-card .stat-label live in
       components/stat-cards.css (canonical owner). Removed from this file
       2026-05-25 as part of the cross-component ownership cleanup. */

    /* Metric cards */
    .metric-card {
        background: var(--card-bg);
        border: 0;
        border-radius: var(--radius-lg);
        box-shadow: var(--elevation-1);
        padding: var(--space-5);
    }

    .metric-value {
        font-size: var(--font-size-2xl);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-heading);
        font-variant-numeric: tabular-nums;
    }

    .metric-label {
        font-size: var(--font-size-sm);
        color: var(--color-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }
}