/* ============================================================
   headings.css — mirrors library/lib/src/theme/headings.dart
   ============================================================
   Each TextLevel from the Dart enum maps to either a native
   element or a utility class:

     TextLevel.h1   → <h1>     30 / w600
     TextLevel.h2   → <h2>     24 / w600
     TextLevel.h3   → <h3>     18 / w500
     TextLevel.h4   → <h4>     16 / w500
     TextLevel.h5   → <h5>     14 / w500
     TextLevel.body → <p> / .body   16 / w400
     TextLevel.small → .small        14 / w400
     TextLevel.muted → .muted        14 / w400, color = muted-foreground
     TextLevel.code  → .code / <code> 14 / w400 mono + chip decoration

   Color rules mirror TextLevel.overrideColor: only `.muted`
   forces a color; every other level inherits from the parent
   surface so headings/body pick up the surrounding fg.

   Code chip mirrors TextLevel.decorate: padding (fontSize*0.2
   vertical, fontSize*0.3 horizontal), bg = muted,
   borderRadius = --radius-sm (Radii.brSm).
   ============================================================ */

/* ----- Base reset --------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-family-sans);
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }

/* ----- Headings (color inherits per TextLevel.overrideColor) -- */

h1, h2, h3, h4, h5 {
  margin: 0;
  color: inherit;
  font-family: var(--font-family-sans);
  line-height: 1.2;
}

/* Landing display sizes — larger than the Dart in-app scale (30/24/18). */
h1 { font-size: 80px; font-weight: var(--font-weight-medium); }
h2 { font-size: 28px; font-weight: var(--font-weight-medium); }
h3 { font-size: 20px; font-weight: var(--font-weight-medium); }
h4 { font-size: 18px; font-weight: var(--font-weight-medium); }
h5 { font-size: 16px; font-weight: var(--font-weight-medium); }

@media (max-width: 1024px) {
  h1 { font-size: 64px; }
  h2 { font-size: 24px; }
}

@media (max-width: 768px) {
  h1 { font-size: 52px; }
}

@media (max-width: 480px) {
  h1 { font-size: 38px; }
}

/* ----- Body / Small / Muted ---------------------------------- */

p, .body {
  margin: 0;
  font-size: 16px;
  font-weight: var(--font-weight-regular);
}

.small {
  font-size: 16px;
  font-weight: var(--font-weight-regular);
}

/* Muted is the only level that forces a color (TextLevel.muted). */
.muted {
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  color: var(--color-muted-foreground);
}

/* TextLevel.subtitle — large muted lead text (e.g. hero sub-heading). */
.subtitle {
  font-size: 18px;
  font-weight: var(--font-weight-regular);
  color: var(--color-muted-foreground);
}

/* ----- Code chip (TextLevel.code .decorate) ------------------ */

.code, code {
  font-family: var(--font-family-mono);
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  padding: 0.2em 0.3em;
  background: var(--color-muted);
  border-radius: var(--radius-sm);
  color: inherit;
}

@media (max-width: 768px) {
  .subtitle              { font-size: 16px; }
  .muted, .small,
  .code, code            { font-size: 14px; }
}