/* ============================================================================
   CoverSmart Design System — Base / Element Defaults
   ----------------------------------------------------------------------------
   Load AFTER tokens.css and AFTER global.css, but BEFORE page-specific CSS, so
   any page that styles an element still wins (its CSS loads later). This file
   only supplies sane, token-driven fallbacks + accessibility niceties, so it
   fills gaps rather than overriding existing page designs.
   ============================================================================ */

/* Consistent, visible keyboard focus everywhere (accessibility) */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--cs-ring);
}

::selection {
  background: color-mix(in srgb, var(--cs-brand-500) 26%, transparent);
}

/* Typographic fallbacks — apply only where a page hasn't styled the element.
   Kept at element specificity so page CSS (loaded later) always overrides. */
:where(h1) { font-size: var(--cs-fs-h1);  line-height: var(--cs-lh-tight); letter-spacing: -.02em; text-wrap: balance; }
:where(h2) { font-size: var(--cs-fs-h2);  line-height: var(--cs-lh-tight); letter-spacing: -.01em; text-wrap: balance; }
:where(h3) { font-size: var(--cs-fs-h3);  line-height: var(--cs-lh-snug); }
:where(small) { font-size: var(--cs-fs-sm); color: var(--cs-ink-3); }
:where(code, kbd, samp) { font-family: var(--cs-font-mono); font-size: .9em; }
:where(hr) { border: 0; border-top: 1px solid var(--cs-border); margin: var(--cs-space-5) 0; }

/* Numbers that line up in columns (quote tables, dashboards) */
.cs-tabular { font-variant-numeric: tabular-nums; }

/* Small, safe utility helpers (opt-in) */
.cs-muted { color: var(--cs-ink-3); }
.cs-mono  { font-family: var(--cs-font-mono); font-variant-numeric: tabular-nums; }
.cs-label {
  font-size: var(--cs-fs-label); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--cs-ink-3);
}
.cs-stack   { display: flex; flex-direction: column; gap: var(--cs-space-4); }
.cs-row     { display: flex; align-items: center; gap: var(--cs-space-3); flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}