/* =====================================================================
   Base: typography, focus, global Bootstrap touches.
   Uses tokens only (tokens.css). Sentence case everywhere; Bricolage for
   headings and buttons, Figtree for everything you read (Guidelines §4).
   ===================================================================== */

html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: clip;
}

/* ── Type scale (§4). Phones: Display XL 48, Display 36. ── */
h1, h2, h3, h4, .h1, .h2, .h3, .h4, .display-xl, .display {
  font-family: var(--font-display);
  color: var(--text);
  font-weight: 700;
  text-wrap: balance;
}
.display-xl { font-size: clamp(48px, 7vw, 72px); line-height: .94; font-weight: 800; letter-spacing: -.04em; }
.display    { font-size: clamp(36px, 5vw, 48px); line-height: 1; font-weight: 800; letter-spacing: -.035em; }
h1, .h1 { font-size: 34px; line-height: 38px; letter-spacing: -.025em; }
h2, .h2 { font-size: 26px; line-height: 30px; letter-spacing: -.02em; }
h3, .h3 { font-size: 20px; line-height: 24px; letter-spacing: -.01em; }
h4, .h4 { font-size: 17px; line-height: 22px; letter-spacing: -.005em; }
.lead, .body-lg { font-size: 18px; line-height: 29px; font-weight: 400; }
.small, small { font-size: 14px; line-height: 21px; }
.label {
  font-family: var(--font-body);
  font-size: 12px; line-height: 16px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-muted);
}
.text-muted, .muted { color: var(--text-muted) !important; }
.prose { max-width: 65ch; }
.prose p, .prose li { color: var(--text); }
.num { font-variant-numeric: tabular-nums; }
[lang="mr"], [lang="hi"], .indic { font-family: var(--font-indic); }

a { text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:not([class]) { color: var(--text); }
hr { border-color: var(--line); opacity: 1; }

/* ── Focus: always visible, 3 px marigold (§15) ── */
:focus-visible {
  outline: 3px solid var(--cmu-marigold) !important;
  outline-offset: 2px;
  box-shadow: none !important;
}

/* ── Layout helpers ── */
.page-wrap { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--space-4); }
@media (min-width: 768px) { .page-wrap { padding-inline: var(--space-5); } }
.section { padding-block: var(--space-6); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.section-head h2 { margin: 0; }
.stack > * + * { margin-top: var(--space-4); }
.surface { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
.visually-hidden-focusable:focus { position: fixed !important; top: 8px; left: 8px; z-index: 2000; background: var(--surface); padding: 8px 12px; border-radius: var(--radius-sm); }

/* ── Icons from the sprite (components/_icons.html) ── */
.icon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; vertical-align: -4px; }
.icon--sm { width: 16px; height: 16px; vertical-align: -3px; }
.icon--lg { width: 24px; height: 24px; }
.icon--xl { width: 32px; height: 32px; }
[aria-pressed="true"] .icon-toggle, .is-on .icon-toggle { fill: currentColor; }

/* ── Bootstrap touches that every page shares ── */
.dropdown-menu {
  --bs-dropdown-bg: var(--surface);
  --bs-dropdown-border-color: var(--line);
  --bs-dropdown-border-radius: var(--radius-md);
  --bs-dropdown-link-color: var(--text);
  --bs-dropdown-link-hover-bg: var(--tint);
  --bs-dropdown-link-active-bg: var(--cmu-marigold-light);
  --bs-dropdown-link-active-color: var(--cmu-ink);
  --bs-dropdown-item-padding-y: 10px;
  box-shadow: var(--shadow-float);
  padding: 6px;
}
.dropdown-item { border-radius: var(--radius-sm); display: flex; align-items: center; gap: 10px; min-height: 40px; }
.modal { --bs-modal-bg: var(--surface); --bs-modal-border-color: var(--line); --bs-modal-border-radius: var(--radius-lg); }
.modal-backdrop { --bs-backdrop-bg: #1C1828; --bs-backdrop-opacity: .48; }
.offcanvas { --bs-offcanvas-bg: var(--surface); --bs-offcanvas-color: var(--text); }
.accordion {
  --bs-accordion-bg: var(--surface); --bs-accordion-border-color: var(--line);
  --bs-accordion-active-bg: var(--tint); --bs-accordion-active-color: var(--text);
  --bs-accordion-btn-focus-box-shadow: none; --bs-accordion-border-radius: var(--radius-md);
  --bs-accordion-inner-border-radius: var(--radius-md);
}
.accordion-button { font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.table { --bs-table-bg: transparent; --bs-table-color: var(--text); --bs-table-border-color: var(--line); }

/* ── Motion: respect the phone's reduce-motion setting (§9) ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important;
    transition-duration: 1ms !important; scroll-behavior: auto !important; }
}