/* ─────────────────────────────────────────────────────────────────────────────
   CapoScore Base — reset, type, layout primitives, theme transitions

   Loaded after tokens.css on every page.
   ───────────────────────────────────────────────────────────────────────────── */

/* ============================================================================
   1. Reset (modern, scoped just enough)
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol, fieldset {
  margin: 0; padding: 0;
}
ul, ol { list-style: none; }
fieldset { border: 0; }
img, svg, video { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ============================================================================
   2. Document + theme transition
   ============================================================================ */
html {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

body {
  background: var(--body-bg);
  color: var(--fg-1);
  min-height: 100vh;
  font-size: var(--text-base);
  display: flex;
  flex-direction: column;
}

/* Smooth theme switch on every themeable property */
html, body, [class*="cs-"] {
  transition:
    background-color var(--dur-base) var(--ease-standard),
    color var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard);
}

/* Marketing surfaces use a subtle radial */
body.cs-marketing { background: var(--body-bg-marketing); }

/* Selection */
::selection { background: var(--action); color: #fff; }

/* Scrollbars (subtle, themeable) */
* { scrollbar-width: thin; scrollbar-color: var(--border-3) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-3); border-radius: var(--r-pill); }
*::-webkit-scrollbar-thumb:hover { background: var(--fg-3); }

/* ============================================================================
   3. Typography
   ============================================================================ */
.cs-display {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}
.cs-eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-3);
}
.cs-h1 { font: var(--weight-bold) var(--text-4xl)/var(--leading-tight) var(--font-display); letter-spacing: var(--tracking-tight); }
.cs-h2 { font: var(--weight-semi) var(--text-3xl)/var(--leading-tight) var(--font-display); letter-spacing: var(--tracking-tight); }
.cs-h3 { font: var(--weight-semi) var(--text-2xl)/var(--leading-snug) var(--font-display); }
.cs-h4 { font: var(--weight-semi) var(--text-xl)/var(--leading-snug) var(--font-sans); }
.cs-h5 { font: var(--weight-semi) var(--text-lg)/var(--leading-snug) var(--font-sans); }
.cs-body  { font-size: var(--text-base); color: var(--fg-2); line-height: var(--leading-body); }
.cs-body-lg { font-size: var(--text-lg); color: var(--fg-2); line-height: var(--leading-body); }
.cs-meta  { font-size: var(--text-sm); color: var(--fg-3); }
.cs-mono  { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.cs-num   { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

.cs-muted { color: var(--fg-3); }
.cs-faint { color: var(--fg-4); }

.cs-gradient-text {
  background: var(--capo-grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ============================================================================
   4. Layout primitives
   ============================================================================ */
.cs-container { width: 100%; max-width: var(--container-lg); margin: 0 auto; padding-left: var(--sp-5); padding-right: var(--sp-5); }
.cs-container-narrow { max-width: 480px; }
.cs-container-sm { max-width: var(--container-sm); }
.cs-container-md { max-width: var(--container-md); }
.cs-container-xl { max-width: var(--container-xl); }
.cs-container-2xl { max-width: var(--container-2xl); }

.cs-stack > * + * { margin-top: var(--sp-4); }
.cs-stack-sm > * + * { margin-top: var(--sp-2); }
.cs-stack-lg > * + * { margin-top: var(--sp-6); }
.cs-stack-xl > * + * { margin-top: var(--sp-8); }

.cs-row { display: flex; align-items: center; gap: var(--sp-3); }
.cs-row-tight { display: flex; align-items: center; gap: var(--sp-2); }
.cs-row-loose { display: flex; align-items: center; gap: var(--sp-5); }
.cs-spread { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }

.cs-grid { display: grid; gap: var(--sp-5); }
.cs-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cs-grid-auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

@media (max-width: 880px) {
  .cs-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .cs-grid-2, .cs-grid-3, .cs-grid-4 { grid-template-columns: minmax(0, 1fr); }
  .cs-row, .cs-row-tight, .cs-row-loose, .cs-spread { flex-wrap: wrap; }
}

.cs-section { padding-block: var(--sp-11); }
.cs-section-sm { padding-block: var(--sp-9); }
.cs-section-lg { padding-block: var(--sp-13); }

@media (max-width: 768px) {
  .cs-section { padding-block: var(--sp-9); }
  .cs-section-lg { padding-block: var(--sp-11); }
}

/* Full-bleed helper that stays inside flow */
.cs-bleed { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

/* Sticky-friendly main content area (works with fixed nav) */
main.cs-main { flex: 1; padding-top: var(--nav-height); }
@media (max-width: 768px) { main.cs-main { padding-top: var(--nav-height-mobile); } }

/* ============================================================================
   5. Visibility helpers
   ============================================================================ */
.cs-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;
}
@media (max-width: 768px) { .cs-hide-mobile { display: none !important; } }
@media (min-width: 769px) { .cs-hide-desktop { display: none !important; } }

/* ============================================================================
   6. Focus
   ============================================================================ */
:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ============================================================================
   7. Reduced motion
   ============================================================================ */
@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;
  }
}