/* ===== app-wide typography tokens ===== */
:root {
  /* font families (choose one primary) */
  --font-sans: 'Inter', 'Roboto', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  /* responsive sizes (clamp(min, vw, max)) */
  --fs-title:    clamp(1.6rem, 2.2vw, 2rem);      /* Page titles */
  --fs-subtitle: clamp(1.15rem, 1.4vw, 1.35rem);  /* Section/card titles */
  --fs-body:     1rem;                             /* Paragraphs / table cells */
  --fs-card:     0.9375rem;                        /* Fine/secondary text */

  /* weights */
  --fw-title: 600;
  --fw-sub:   500;
  --fw-body:  400;
}

/* Set app + Bootstrap body font */
html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: 1.55; /* NEW: consistent rhythm */
}

/* Wire Bootstrap's CSS variables so components match */
:root {
  --bs-body-font-family: var(--font-sans);
  --bs-body-font-size: var(--fs-body);
  --bs-body-line-height: 1.55; /* NEW */
  /* Optional: lock heading defaults app-wide */
  --bs-heading-font-weight: var(--fw-sub);
  --bs-heading-color: inherit;
}

/* Headings (safe defaults if you don't add utility classes) */
h1 { font-size: var(--fs-title);    font-weight: var(--fw-title); line-height: 1.2; }
h2,
h3 { font-size: var(--fs-subtitle); font-weight: var(--fw-sub);   line-height: 1.25; }

/* Utilities for explicit usage */
.app-title     { font-family: var(--font-sans); font-size: var(--fs-title);    font-weight: var(--fw-title); line-height: 1.2; }
.app-subtitle  { font-family: var(--font-sans); font-size: var(--fs-subtitle); font-weight: var(--fw-sub);   line-height: 1.25; }
.app-text      { font-family: var(--font-sans); font-size: var(--fs-body);     font-weight: var(--fw-body);  line-height: 1.55; }
.app-card-text { font-family: var(--font-sans); font-size: var(--fs-card);     font-weight: var(--fw-body);  line-height: 1.45; }

/* Optional: slightly denser cards */
.card .card-title { font-size: var(--fs-subtitle); font-weight: var(--fw-sub); }
.card .card-text  { font-size: var(--fs-card); }

/* Optional: ensure form controls & buttons inherit the font cleanly */
input, select, textarea, button { font: inherit; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

/* Optional: minor dark-mode contrast tweaks (keeps Bootstrap colors) */
@media (prefers-color-scheme: dark) {
  .app-card-text { opacity: 0.9; }
}