/* ============================================================
   CShield · Base layer — resets, document defaults, type helpers.
   Kept minimal: tokens do the heavy lifting.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}

/* Links — brand blue, darker on hover (never browser default). */
a { color: var(--brand-primary); text-decoration: none; }
a:hover { color: var(--brand-primary-hover); text-decoration: underline; }

/* Shared focus-visible treatment: 2px primary ring, 4px offset. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--border-accent) solid var(--focus-ring);
  outline-offset: 4px;
}

/* ---- Shared keyframes (loaders, pulses, shimmer, takeover entrance) ---- */
@keyframes cs-spin { to { transform: rotate(360deg); } }
@keyframes cs-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes cs-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
@keyframes cs-progress-indeterminate { 0% { left: -40%; } 100% { left: 100%; } }
@keyframes cs-interrupt-in { from { transform: translateY(24px) scale(0.96); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes cs-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* Respect OS reduce-motion: make transitions + one-shot entrance animations instant,
   but let continuous, information-bearing loaders keep running (spinner, shimmer, progress). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
  [style*="cs-interrupt-in"], [style*="cs-sheet-up"] { animation: none !important; }
}

/* ---- Type helper classes (map 1:1 to the type scale) ---- */
.cs-display { font-size: var(--text-display); font-weight: var(--fw-bold); line-height: var(--lh-display); letter-spacing: var(--tracking-display); }
.cs-h1 { font-size: var(--text-h1); font-weight: var(--fw-bold); line-height: var(--lh-h1); letter-spacing: var(--tracking-display); }
.cs-h2 { font-size: var(--text-h2); font-weight: var(--fw-bold); line-height: var(--lh-h2); letter-spacing: var(--tracking-h2); }
.cs-h3 { font-size: var(--text-h3); font-weight: var(--fw-semibold); line-height: var(--lh-h3); }
.cs-body-lg { font-size: var(--text-body-lg); font-weight: var(--fw-regular); line-height: var(--lh-body-lg); }
.cs-body { font-size: var(--text-body); font-weight: var(--fw-regular); line-height: var(--lh-body); }
.cs-body-sm { font-size: var(--text-body-sm); font-weight: var(--fw-regular); line-height: var(--lh-body-sm); }
.cs-caption { font-size: var(--text-caption); font-weight: var(--fw-medium); line-height: var(--lh-caption); }
.cs-label { font-size: var(--text-label); font-weight: var(--fw-medium); line-height: var(--lh-label); }
.cs-button { font-size: var(--text-button); font-weight: var(--fw-semibold); line-height: var(--lh-button); }