/* ===== Accessibility baseline =====
 *
 * Loaded last so it wins over component styles.
 *
 * Two problems this fixes globally rather than file by file:
 *
 * 1. FOCUS VISIBILITY. base.css had a single :focus-visible rule and only 3 of
 *    54 stylesheets referenced focus at all. Every custom-styled interactive
 *    element — tabs, sidebar links, the FAB, mobile nav, tool cards, plan CTAs,
 *    notification-channel cards, agenda items, queue rows — relied on that one
 *    generic rule against wildly varying backgrounds. Keyboard users could not
 *    reliably tell where they were.
 *
 * 2. REDUCED MOTION. prefers-reduced-motion appeared in 7 of 54 files, and not
 *    in the animation-heavy ones: animations.css, dashboard.css, daily-hub.css,
 *    milestones.css, completion.css, onboarding.css. The count-up animations,
 *    the completion ceremony, milestone toasts and page transitions all ignored
 *    the preference entirely.
 *
 * See docs/PRODUCT_UX_AUDIT.md K2a, K2b.
 */

/* ---------- Focus ---------- */

:where(a, button, input, select, textarea, summary, [tabindex], [role="button"],
       [role="tab"], [role="option"], [role="menuitem"]):focus-visible {
    outline: 2px solid var(--accent-primary, #4F8FE0);
    outline-offset: 2px;
    /* A second ring in the page background keeps the outline legible against
       accent-coloured and image backgrounds. */
    box-shadow: 0 0 0 4px var(--bg-primary, #090A0E);
    border-radius: var(--radius-sm, 4px);
}

/* Never remove the ring without replacing it. */
:focus-visible {
    outline-color: var(--accent-primary, #4F8FE0);
}

/* Inputs already carry a border, so an offset ring reads as doubled. */
:where(input, select, textarea):focus-visible {
    outline-offset: 1px;
    box-shadow: 0 0 0 3px var(--accent-primary-subtle, rgba(79, 143, 224, 0.08));
}

/* The skip link must be visible the moment it receives focus. */
.skip-link:focus,
.skip-link:focus-visible {
    position: fixed;
    top: var(--space-2, 0.5rem);
    left: var(--space-2, 0.5rem);
    z-index: 10000;
    width: auto;
    height: auto;
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    clip: auto;
    clip-path: none;
    color: var(--text-primary, #EEF0F4);
    background: var(--bg-surface, #0F1319);
    border: 1px solid var(--accent-primary, #4F8FE0);
    border-radius: var(--radius-md, 8px);
}

/* ---------- Touch targets ---------- */

/* WCAG 2.5.8 asks for 24x24 minimum; 44px is the comfortable mobile figure. */
@media (pointer: coarse) {
    :where(button, a.btn, .btn, .mobile-nav-link, .lib-view-btn, .toast-close,
           .mobile-more-item, .ext-nudge-dismiss) {
        min-height: 44px;
    }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    /* Blanket rule: anything that animates stops, whatever file declared it.
       Not `animation: none` — some components rely on an animation's end state
       for their final layout, so collapse the duration instead and let the
       end state apply immediately. */
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    /* Purely decorative motion can go entirely. */
    .ticker-track,
    .hero-diamond,
    .skeleton,
    .live-preview-dot,
    .hero-badge-dot {
        animation: none !important;
    }
}

/* ---------- Contrast ---------- */

/*
 * Measured, not estimated. Ratios below are against the surface each colour is
 * actually used on — --bg-card for cards, --bg-primary for the page.
 *
 * DARK, before:  --text-dim #6B7380 on #0F1319 = 3.89:1  (AA needs 4.5)
 * DARK, after:   --text-dim #7C8593 on #0F1319 = 5.00:1
 *
 * LIGHT was considerably worse, and had escaped notice because the theme is
 * rarely exercised:
 *   --text-dim   #A0A6B0 on #FFFFFF = 2.45:1   badly failing
 *   --text-muted #7A808A on #FFFFFF = 3.98:1   failing
 *
 * Both are used pervasively for captions, metadata, timestamps and helper
 * copy, so this was not an edge case.
 *
 * Scoped per theme deliberately. A single :root override would leak into the
 * light theme — :root and [data-theme="light"] have equal specificity, and
 * this file loads later, so :root would win and leave light at 3.73:1.
 */
:root,
[data-theme="dark"] {
    --text-dim: #7C8593;   /* 5.00:1 on card, 5.31:1 on page */
}

[data-theme="light"] {
    --text-dim: #666D78;   /* 5.22:1 on card, 4.83:1 on page */
    --text-muted: #5F6670; /* 5.80:1 on card */
}

@media (prefers-contrast: more) {
    :root,
    [data-theme="dark"] {
        --text-dim: #9AA3B0;
        --text-muted: #C2C9D4;
        --border: rgba(255, 255, 255, 0.16);
        --border-hover: rgba(255, 255, 255, 0.28);
    }
    [data-theme="light"] {
        --text-dim: #4A505A;
        --text-muted: #3A404A;
        --border: rgba(0, 0, 0, 0.18);
        --border-hover: rgba(0, 0, 0, 0.3);
    }
}

/* ---------- Screen-reader utility ---------- */

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