/* ==========================================================================
   KindStock base layer: typography roles, the money voice, focus visibility,
   and the reduced-motion guard. Sits between tokens.css (variables only)
   and styles.css (components/surfaces). No layout rules here.
   ========================================================================== */

/* --- Typography roles -----------------------------------------------------
   DM Sans does the everyday work (via --bs-body-font-family). Libre
   Baskerville is display-only and deliberately scarce: page headers, the
   auth wordmark, empty-state headings. Apply it with .ks-display. */

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    letter-spacing: -0.01em;
}

.ks-display {
    font-family: var(--ks-font-display);
    font-weight: 400;
    letter-spacing: 0;
}

/* --- The money voice -------------------------------------------------------
   Every monetary value renders in IBM Plex Mono with tabular numerals so
   columns of amounts align like a till receipt. Gold is semantic: .money--ga
   is the ONLY class allowed to render gold, and it means money HMRC returns
   (Gift Aid). Never use it decoratively. */

.money,
.ks-code {
    font-family: var(--ks-font-money);
    font-variant-numeric: tabular-nums lining-nums;
}

.money--ga {
    color: var(--ks-gift-aid);
}

.money--ga-strong {
    color: var(--ks-gift-aid-strong);
}

.money--neg {
    color: var(--ks-red);
}

/* Cash-drawer polarity (money(signed=True)): overages read deep green,
   shortages the standard negative red. Over/short money ONLY - never
   decorative, never Gift Aid (that is gold, and only gold). */
.money--pos {
    color: var(--ks-cash-over);
}

.ks-code {
    font-size: 0.875em;
    letter-spacing: 0.02em;
}

/* --- Focus visibility ------------------------------------------------------
   Bootstrap widgets (buttons, inputs) carry their own focus ring, recolored
   sage through the Layer-3 bridge. This covers everything else that can
   take keyboard focus. */

a:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--ks-sage);
    outline-offset: 2px;
    border-radius: 2px;
}

/* --- Reduced motion --------------------------------------------------------
   The design uses small transitions (hover lifts, sidebar slide, pulse
   dots); anyone asking for reduced motion gets none of them. */

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