/* ==========================================================================
   Zoriana — Typography System
   Fluid type scale & vertical spacing tokens using clamp()
   Min viewport: 375px — Max viewport: 1200px
   ========================================================================== */

/* --- Type Scale Tokens --- */
:root {
    /* Display:  32px → 60px */
    --text-display: clamp(2rem, 1.0606rem + 3.9394vw, 3.75rem);
    /* H1:       26px → 46px */
    --text-h1: clamp(1.625rem, 0.9545rem + 2.8485vw, 2.875rem);
    /* H2:       22px → 32px */
    --text-h2: clamp(1.375rem, 1.0394rem + 1.4545vw, 2rem);
    /* H3:       18px → 24px */
    --text-h3: clamp(1.125rem, 0.9236rem + 0.8485vw, 1.5rem);
    /* H4:       16px → 18px */
    --text-h4: clamp(1rem, 0.9329rem + 0.303vw, 1.125rem);
    /* Body:     15px → 16px */
    --text-body: clamp(0.9375rem, 0.9042rem + 0.1515vw, 1rem);
    /* Small:    12px → 14px */
    --text-small: clamp(0.75rem, 0.6829rem + 0.303vw, 0.875rem);

    /* --- Spacing Tokens --- */
    /* XS:  4px →  8px */
    --space-xs: clamp(0.25rem, 0.1159rem + 0.5657vw, 0.5rem);
    /* SM:  8px → 16px */
    --space-sm: clamp(0.5rem, 0.2318rem + 1.1314vw, 1rem);
    /* MD: 16px → 24px */
    --space-md: clamp(1rem, 0.7318rem + 1.1314vw, 1.5rem);
    /* LG: 32px → 48px */
    --space-lg: clamp(2rem, 1.4636rem + 2.2627vw, 3rem);
    /* XL: 48px → 80px */
    --space-xl: clamp(3rem, 1.9273rem + 4.5255vw, 5rem);
}

/* --- Type Classes --- */
.t-display {
    font-size: var(--text-display);
    line-height: 1.15;
}

.t-h1 {
    font-size: var(--text-h1);
    line-height: 1.2;
}

.t-h2 {
    font-size: var(--text-h2);
    line-height: 1.25;
}

.t-h3 {
    font-size: var(--text-h3);
    line-height: 1.3;
}

.t-h4 {
    font-size: var(--text-h4);
    line-height: 1.4;
}

.t-body {
    font-size: var(--text-body);
    line-height: 1.6;
}

.t-small {
    font-size: var(--text-small);
    line-height: 1.5;
}

/* --- Spacing Utility Classes (margin-bottom) --- */
.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

/* --- Spacing Utility Classes (margin-top) --- */
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

/* --- Spacing Utility Classes (padding-top / padding-bottom) --- */
.pt-lg { padding-top: var(--space-lg); }
.pt-xl { padding-top: var(--space-xl); }
.pb-lg { padding-bottom: var(--space-lg); }
.pb-xl { padding-bottom: var(--space-xl); }