/* ===============================================================
   02-typography.css
   Therapy-safe typography, drop-in for existing CSS stack
   =============================================================== */

:root{
  --fs-body: 1rem;
  --lh-body: 1.65;

  --fs-h1: 2.2rem;  --lh-h1: 1.25;
  --fs-h2: 1.8rem;  --lh-h2: 1.30;
  --fs-h3: 1.4rem;  --lh-h3: 1.35;
  --fs-h4: 1.2rem;  --lh-h4: 1.40;
  --fs-h5: 1.05rem; --lh-h5: 1.45;

  --fw-body: 400;
  --fw-em: 500;
  --fw-head: 600;

}

html{
  font-size: 100%;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

body{
  font-family: var(--font-sans, "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-body);
  color: var(--c-text);
  background: var(--c-page);
}

.prose{
  max-width: var(--measure, 65ch);
}

h1, h2, h3, h4, h5{
  font-family: var(--font-sans, "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif);
  font-weight: var(--fw-head);
  color: var(--c-text);
  margin: 0 0 0.6em 0;
  letter-spacing: -0.01em;
}

h1{ font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2{ font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3{ font-size: var(--fs-h3); line-height: var(--lh-h3); }
h4{ font-size: var(--fs-h4); line-height: var(--lh-h4); }
h5{ font-size: var(--fs-h5); line-height: var(--lh-h5); }

p{
  margin: 0 0 1.2em 0;
}

small, .muted{
  color: var(--c-muted);
}

strong{ font-weight: var(--fw-em); }
em{ font-style: italic; }

a{
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

a:hover{
  text-decoration-thickness: 2px;
}

ul, ol{
  padding-left: 1.4em;
  margin: 0 0 1.2em 0;
}

li{ margin-bottom: 0.4em; }

blockquote{
  margin: 0 0 1.2em 0;
  padding: 0.2em 0 0.2em 1em;
  border-left: 3px solid var(--c-border);
  color: var(--c-muted);
}

hr{
  border: 0;
  border-top: 1px solid var(--c-border);
  margin: 2rem 0;
}

label{
  display: block;
  font-weight: var(--fw-em);
  color: var(--c-text);
  margin: 0 0 0.4em 0;
}

input, textarea, select{
  font-family: var(--font-sans, "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--c-text);
}

::placeholder{
  color: color-mix(in srgb, var(--c-muted) 70%, transparent);
}

.help, .hint{
  color: var(--c-muted);
  font-size: 0.95rem;
  margin-top: -0.4em;
  margin-bottom: 1em;
}

button, .btn, [type="button"], [type="submit"]{
  font-family: var(--font-sans, "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif);
  font-weight: var(--fw-em);
  letter-spacing: 0;
}

table{ border-collapse: collapse; }

td, th{
  padding: 0.6em 0.8em;
  border-bottom: 1px solid var(--c-border);
  text-align: left;
}

th{ font-weight: var(--fw-em); }

:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--c-accent) 55%, transparent);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce){
  html:focus-within{ scroll-behavior: auto; }
}

@media (max-width: 480px){
  h1{ font-size: 1.9rem; }
  h2{ font-size: 1.55rem; }
}