/* ══════════════════════════════════════════════════════════════
   Base — reset, typography, core elements
   ══════════════════════════════════════════════════════════════ */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-family);
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
}

a { color: var(--blue); text-decoration: none; }

/* ── Accessibility: Focus States ── */
:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

/* Remove outline for mouse clicks, keep for keyboard */
:focus:not(:focus-visible) {
    outline: none;
}

/* Skip to content link (hidden until focused) */
.skip-link {
    position: absolute; top: -100%; left: var(--space-4);
    padding: var(--space-2) var(--space-4);
    background: var(--blue); color: #fff;
    border-radius: var(--radius-md);
    font-weight: 600; font-size: var(--font-size-sm);
    z-index: 9999;
    transition: top .2s;
}
.skip-link:focus { top: var(--space-2); }

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Screen reader only */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Cards ── */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
}
.card h2 {
    font-size: var(--font-size-sm);
    color: var(--text2);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: var(--space-4);
    font-weight: 600;
}
.card h3 {
    font-size: var(--font-size-sm);
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: var(--space-3);
    font-weight: 600;
}