/* Typography System - Origamid-inspired setup */
:root {
    --font-1: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-2: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --step--1: clamp(0.875rem, 0.84rem + 0.15vw, 0.95rem);
    --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
    --step-1: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
    --step-2: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
    --step-3: clamp(1.875rem, 1.55rem + 1.35vw, 2.625rem);
    --step-4: clamp(2.25rem, 1.75rem + 2vw, 3.375rem);

    --line-tight: 1.2;
    --line-title: 1.25;
    --line-body: 1.5;
    --line-loose: 1.65;
    --tracking-display: -0.02em;
    --tracking-title: -0.01em;
    --tracking-body: 0.005em;
}

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

body {
    font-family: var(--font-1);
    font-size: var(--step-0);
    line-height: var(--line-body);
    letter-spacing: var(--tracking-body);
}

h1, .h1 {
    font-family: var(--font-1);
    font-size: var(--step-4);
    line-height: var(--line-tight);
    letter-spacing: var(--tracking-display);
    font-weight: 700;
}

h2, .h2 {
    font-family: var(--font-1);
    font-size: var(--step-3);
    line-height: var(--line-title);
    letter-spacing: var(--tracking-title);
    font-weight: 700;
}

h3, .h3 {
    font-family: var(--font-1);
    font-size: var(--step-2);
    line-height: var(--line-title);
    letter-spacing: var(--tracking-title);
    font-weight: 700;
}

h4, .h4 {
    font-family: var(--font-1);
    font-size: var(--step-1);
    line-height: var(--line-title);
    letter-spacing: var(--tracking-title);
    font-weight: 600;
}

h5, .h5 {
    font-family: var(--font-1);
    font-size: var(--step-0);
    line-height: var(--line-body);
    font-weight: 600;
}

h6, .h6 {
    font-family: var(--font-1);
    font-size: var(--step--1);
    line-height: var(--line-body);
    font-weight: 600;
}

p, li, label, input, textarea, select, button {
    font-size: var(--step-0);
    line-height: var(--line-body);
}

small, .text-small {
    font-size: var(--step--1);
    line-height: var(--line-loose);
}

button, input, textarea, select {
    font-family: inherit;
}

/* Utility classes for explicit typography control */
.font-1-xs { font: 400 var(--step--1) / var(--line-body) var(--font-1); }
.font-1-s { font: 400 var(--step-0) / var(--line-body) var(--font-1); }
.font-1-m { font: 500 var(--step-1) / var(--line-title) var(--font-1); }
.font-1-l { font: 600 var(--step-2) / var(--line-title) var(--font-1); }
.font-1-xl { font: 700 var(--step-3) / var(--line-tight) var(--font-1); }
.font-1-xxl { font: 700 var(--step-4) / var(--line-tight) var(--font-1); }

.font-2-xs { font: 400 var(--step--1) / var(--line-body) var(--font-2); }
.font-2-s { font: 400 var(--step-0) / var(--line-body) var(--font-2); }
.font-2-m { font: 500 var(--step-1) / var(--line-title) var(--font-2); }
.font-2-l { font: 600 var(--step-2) / var(--line-title) var(--font-2); }