/* #####################################################################
   WEBDEV FRAMEWORK v0.6
   MODULE: Typography
   PURPOSE: Global type hierarchy and text treatments.
   DEPENDENCIES: colors.php; font files are loaded from design/typography.php by includes/header.php
   ##################################################################### */

html { font-size: 100%; scroll-behavior: smooth; }
body { margin: 0; color: var(--color-text); background: var(--color-background); font-family: var(--font-text); font-size: var(--fs-md); line-height: 1.6; }
h1,h2,h3,h4,h5,h6 { margin: 0; line-height: 1.2; text-align: center; letter-spacing: .02em; text-shadow: 2px 2px 4px var(--color-shadow-heading); }
h1 { color: var(--site-color-secondary); font-family: var(--font-primary); font-size: clamp(2.25rem,6vw,var(--fs-4xl)); }
h2 { color: var(--site-color-primary); font-family: var(--font-secondary); font-size: clamp(1.85rem,4vw,var(--fs-3xl)); }
h3 { color: var(--site-color-accent); font-family: var(--font-text); font-size: var(--fs-2xl); }
h4 { color: var(--site-color-text); font-family: var(--font-secondary); font-size: var(--fs-xl); }
h5 { color: var(--site-color-primary); font-family: var(--font-primary); font-size: var(--fs-lg); }
h6 { color: var(--site-color-accent); font-family: var(--font-accent); font-size: var(--fs-xl); }
p { margin: 0; }
a, a:link, a:visited { color: var(--site-color-accent); font-family: var(--font-primary); text-decoration: none; transition: color var(--transition-normal); }
a:hover, a:focus-visible { color: var(--site-color-secondary); text-decoration: none; }
a:active { color: var(--site-color-accent); text-decoration: none; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
blockquote { margin: 0; padding: 1rem 1.5rem; border-left: 4px solid var(--site-color-primary); color: var(--color-secondary); font-size: var(--fs-lg); font-style: italic; }
code,kbd,pre,samp { font-family: var(--font-mono); }
.text-small { font-size: var(--fs-sm); } .text-large { font-size: var(--fs-lg); }
.text-light { font-weight: var(--fw-light); } .text-normal { font-weight: var(--fw-normal); } .text-medium { font-weight: var(--fw-medium); } .text-semibold { font-weight: var(--fw-semibold); } .text-bold { font-weight: var(--fw-bold); }
.text-left { text-align:left; } .text-center { text-align:center; } .text-right { text-align:right; }
.text-uppercase { text-transform:uppercase; } .text-lowercase { text-transform:lowercase; } .text-capitalize { text-transform:capitalize; }