/* =====================================================================
   MISTCULTURE DESIGN SYSTEM — Typography
   Location: assets/css/components/02-typography.css
   ===================================================================== */

/* Base */
html {
  scroll-padding-top: calc(var(--mc-header-height, 68px) + 18px);
  font-size: var(--mc-font-size-base, 16px);
}

body {
  background-color: #E7EEF7;
  font-family: var(--mc-font-body);
  color: var(--mc-text);
  margin: 0;
  padding: 0;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--mc-font-heading);
  color: var(--mc-ink);
  line-height: 1.2;
  margin-top: 0;
  font-weight: 700;
}

h1 { font-size: clamp(2.25rem, 4vw + 1rem, 3.5rem); }
h2 { font-size: clamp(1.75rem, 3vw + 1rem, 2.5rem); }
h3 { font-size: clamp(1.375rem, 2vw + 1rem, 1.875rem); }
h4 { font-size: clamp(1.125rem, 1.5vw + 1rem, 1.5rem); }
h5 { font-size: clamp(1rem, 1vw + 1rem, 1.25rem); }
h6 { font-size: clamp(0.875rem, 1vw + 0.875rem, 1.125rem); }

/* Heading scale utility */
.th-heading-scale-80  { --mc-heading-scale: 80%;  }
.th-heading-scale-90  { --mc-heading-scale: 90%;  }
.th-heading-scale-100 { --mc-heading-scale: 100%; }
.th-heading-scale-110 { --mc-heading-scale: 110%; }
.th-heading-scale-120 { --mc-heading-scale: 120%; }
.th-heading-scale-130 { --mc-heading-scale: 130%; }
.th-heading-scale-140 { --mc-heading-scale: 140%; }

/* Text utilities */
.th-text-sm    { font-size: 0.875rem; }
.th-text-base  { font-size: 1rem; }
.th-text-lg    { font-size: 1.125rem; }
.th-text-xl    { font-size: 1.25rem; }
.th-text-2xl   { font-size: 1.5rem; }
.th-text-3xl   { font-size: 1.875rem; }
.th-text-4xl   { font-size: 2.25rem; }

.th-font-heading { font-family: var(--mc-font-heading); }
.th-font-body    { font-family: var(--mc-font-body); }

.th-font-light   { font-weight: 300; }
.th-font-normal  { font-weight: 400; }
.th-font-medium  { font-weight: 500; }
.th-font-semibold { font-weight: 600; }
.th-font-bold    { font-weight: 700; }
.th-font-extrabold { font-weight: 800; }

.th-text-ink      { color: var(--mc-ink); }
.th-text-leaf     { color: var(--mc-leaf); }
.th-text-blue     { color: var(--mc-blue); }
.th-text-soft     { color: var(--mc-text-soft); }
.th-text-soil     { color: var(--mc-soil); }
.th-text-white    { color: #ffffff; }
.th-text-muted    { color: var(--mc-text-soft); }

.th-leading-tight   { line-height: 1.25; }
.th-leading-normal  { line-height: 1.6; }
.th-leading-relaxed { line-height: 1.75; }

.th-tracking-tight  { letter-spacing: -0.02em; }
.th-tracking-normal { letter-spacing: 0; }
.th-tracking-wide   { letter-spacing: 0.02em; }
.th-tracking-wider  { letter-spacing: 0.04em; }

/* Links */
a {
  color: var(--mc-leaf);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover,
a:focus {
  color: var(--mc-ink);
  text-decoration: underline;
}

/* Lists */
ul, ol {
  margin: 0 0 1rem;
  padding-left: 1.5rem;
}
li { margin-bottom: 0.5rem; }

/* Paragraphs */
p {
  margin: 0 0 1rem;
  line-height: 1.7;
}

/* Blockquote */
blockquote {
  border-left: 4px solid var(--mc-leaf);
  padding-left: 1.5rem;
  margin: 1.5rem 0;
  font-style: italic;
  color: var(--mc-text-soft);
}

/* Code */
code, pre {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
code {
  background: var(--mc-mist);
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  font-size: 0.9em;
}
pre {
  background: #1E293B;
  color: #E2E8F0;
  padding: 1.5rem;
  border-radius: 12px;
  overflow-x: auto;
  margin: 1.5rem 0;
}
pre code {
  background: none;
  padding: 0;
  color: inherit;
  font-size: 0.9rem;
}

/* Horizontal rule */
hr {
  border: none;
  border-top: 1px solid var(--mc-line);
  margin: 2rem 0;
}