/* Typography System - Enhanced typography classes and utilities */ /* Font Family Classes */ .font-sans { font-family: var(--font-family-primary); } .font-display { font-family: var(--font-family-display); } /* Font Size Classes */ .text-xs { font-size: var(--font-size-xs); } .text-sm { font-size: var(--font-size-sm); } .text-base { font-size: var(--font-size-base); } .text-lg { font-size: var(--font-size-lg); } .text-xl { font-size: var(--font-size-xl); } .text-2xl { font-size: var(--font-size-2xl); } .text-3xl { font-size: var(--font-size-3xl); } .text-4xl { font-size: var(--font-size-4xl); } .text-5xl { font-size: var(--font-size-5xl); } .text-6xl { font-size: var(--font-size-6xl); } .text-7xl { font-size: var(--font-size-7xl); } .text-8xl { font-size: var(--font-size-8xl); } .text-9xl { font-size: var(--font-size-9xl); } /* Font Weight Classes */ .font-thin { font-weight: var(--font-weight-thin); } .font-extralight { font-weight: var(--font-weight-extralight); } .font-light { font-weight: var(--font-weight-light); } .font-normal { font-weight: var(--font-weight-normal); } .font-medium { font-weight: var(--font-weight-medium); } .font-semibold { font-weight: var(--font-weight-semibold); } .font-bold { font-weight: var(--font-weight-bold); } .font-extrabold { font-weight: var(--font-weight-extrabold); } .font-black { font-weight: var(--font-weight-black); } /* Line Height Classes */ .leading-tight { line-height: var(--line-height-tight); } .leading-normal { line-height: var(--line-height-normal); } .leading-relaxed { line-height: var(--line-height-relaxed); } .leading-loose { line-height: var(--line-height-loose); } /* Letter Spacing Classes */ .tracking-tighter { letter-spacing: var(--letter-spacing-tighter); } .tracking-tight { letter-spacing: var(--letter-spacing-tight); } .tracking-normal { letter-spacing: var(--letter-spacing-normal); } .tracking-wide { letter-spacing: var(--letter-spacing-wide); } .tracking-wider { letter-spacing: var(--letter-spacing-wider); } .tracking-widest { letter-spacing: var(--letter-spacing-widest); } /* Text Color Classes */ .text-primary-50 { color: var(--color-primary-50); } .text-primary-100 { color: var(--color-primary-100); } .text-primary-200 { color: var(--color-primary-200); } .text-primary-300 { color: var(--color-primary-300); } .text-primary-400 { color: var(--color-primary-400); } .text-primary-500 { color: var(--color-primary-500); } .text-primary-600 { color: var(--color-primary-600); } .text-primary-700 { color: var(--color-primary-700); } .text-primary-800 { color: var(--color-primary-800); } .text-primary-900 { color: var(--color-primary-900); } .text-primary-950 { color: var(--color-primary-950); } .text-secondary-50 { color: var(--color-secondary-50); } .text-secondary-100 { color: var(--color-secondary-100); } .text-secondary-200 { color: var(--color-secondary-200); } .text-secondary-300 { color: var(--color-secondary-300); } .text-secondary-400 { color: var(--color-secondary-400); } .text-secondary-500 { color: var(--color-secondary-500); } .text-secondary-600 { color: var(--color-secondary-600); } .text-secondary-700 { color: var(--color-secondary-700); } .text-secondary-800 { color: var(--color-secondary-800); } .text-secondary-900 { color: var(--color-secondary-900); } .text-secondary-950 { color: var(--color-secondary-950); } .text-accent-50 { color: var(--color-accent-50); } .text-accent-100 { color: var(--color-accent-100); } .text-accent-200 { color: var(--color-accent-200); } .text-accent-300 { color: var(--color-accent-300); } .text-accent-400 { color: var(--color-accent-400); } .text-accent-500 { color: var(--color-accent-500); } .text-accent-600 { color: var(--color-accent-600); } .text-accent-700 { color: var(--color-accent-700); } .text-accent-800 { color: var(--color-accent-800); } .text-accent-900 { color: var(--color-accent-900); } .text-accent-950 { color: var(--color-accent-950); } .text-success { color: var(--color-success); } .text-warning { color: var(--color-warning); } .text-error { color: var(--color-error); } .text-info { color: var(--color-info); } /* Text Alignment Classes */ .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .text-justify { text-align: justify; } /* Text Transform Classes */ .text-uppercase { text-transform: uppercase; } .text-lowercase { text-transform: lowercase; } .text-capitalize { text-transform: capitalize; } /* Text Decoration Classes */ .text-underline { text-decoration: underline; } .text-line-through { text-decoration: line-through; } .text-no-underline { text-decoration: none; } /* Text Overflow Classes */ .text-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .text-clip { overflow: hidden; text-overflow: clip; white-space: nowrap; } /* Responsive Typography */ @media (max-width: 639px) { .text-4xl { font-size: var(--font-size-3xl); } .text-5xl { font-size: var(--font-size-4xl); } .text-6xl { font-size: var(--font-size-5xl); } .text-7xl { font-size: var(--font-size-6xl); } .text-8xl { font-size: var(--font-size-7xl); } .text-9xl { font-size: var(--font-size-8xl); } } @media (min-width: 640px) { .sm\:text-xs { font-size: var(--font-size-xs); } .sm\:text-sm { font-size: var(--font-size-sm); } .sm\:text-base { font-size: var(--font-size-base); } .sm\:text-lg { font-size: var(--font-size-lg); } .sm\:text-xl { font-size: var(--font-size-xl); } .sm\:text-2xl { font-size: var(--font-size-2xl); } .sm\:text-3xl { font-size: var(--font-size-3xl); } .sm\:text-4xl { font-size: var(--font-size-4xl); } .sm\:text-5xl { font-size: var(--font-size-5xl); } .sm\:text-6xl { font-size: var(--font-size-6xl); } .sm\:text-7xl { font-size: var(--font-size-7xl); } .sm\:text-8xl { font-size: var(--font-size-8xl); } .sm\:text-9xl { font-size: var(--font-size-9xl); } } @media (min-width: 768px) { .md\:text-xs { font-size: var(--font-size-xs); } .md\:text-sm { font-size: var(--font-size-sm); } .md\:text-base { font-size: var(--font-size-base); } .md\:text-lg { font-size: var(--font-size-lg); } .md\:text-xl { font-size: var(--font-size-xl); } .md\:text-2xl { font-size: var(--font-size-2xl); } .md\:text-3xl { font-size: var(--font-size-3xl); } .md\:text-4xl { font-size: var(--font-size-4xl); } .md\:text-5xl { font-size: var(--font-size-5xl); } .md\:text-6xl { font-size: var(--font-size-6xl); } .md\:text-7xl { font-size: var(--font-size-7xl); } .md\:text-8xl { font-size: var(--font-size-8xl); } .md\:text-9xl { font-size: var(--font-size-9xl); } } @media (min-width: 1024px) { .lg\:text-xs { font-size: var(--font-size-xs); } .lg\:text-sm { font-size: var(--font-size-sm); } .lg\:text-base { font-size: var(--font-size-base); } .lg\:text-lg { font-size: var(--font-size-lg); } .lg\:text-xl { font-size: var(--font-size-xl); } .lg\:text-2xl { font-size: var(--font-size-2xl); } .lg\:text-3xl { font-size: var(--font-size-3xl); } .lg\:text-4xl { font-size: var(--font-size-4xl); } .lg\:text-5xl { font-size: var(--font-size-5xl); } .lg\:text-6xl { font-size: var(--font-size-6xl); } .lg\:text-7xl { font-size: var(--font-size-7xl); } .lg\:text-8xl { font-size: var(--font-size-8xl); } .lg\:text-9xl { font-size: var(--font-size-9xl); } } @media (min-width: 1280px) { .xl\:text-xs { font-size: var(--font-size-xs); } .xl\:text-sm { font-size: var(--font-size-sm); } .xl\:text-base { font-size: var(--font-size-base); } .xl\:text-lg { font-size: var(--font-size-lg); } .xl\:text-xl { font-size: var(--font-size-xl); } .xl\:text-2xl { font-size: var(--font-size-2xl); } .xl\:text-3xl { font-size: var(--font-size-3xl); } .xl\:text-4xl { font-size: var(--font-size-4xl); } .xl\:text-5xl { font-size: var(--font-size-5xl); } .xl\:text-6xl { font-size: var(--font-size-6xl); } .xl\:text-7xl { font-size: var(--font-size-7xl); } .xl\:text-8xl { font-size: var(--font-size-8xl); } .xl\:text-9xl { font-size: var(--font-size-9xl); } } @media (min-width: 1536px) { .2xl\:text-xs { font-size: var(--font-size-xs); } .2xl\:text-sm { font-size: var(--font-size-sm); } .2xl\:text-base { font-size: var(--font-size-base); } .2xl\:text-lg { font-size: var(--font-size-lg); } .2xl\:text-xl { font-size: var(--font-size-xl); } .2xl\:text-2xl { font-size: var(--font-size-2xl); } .2xl\:text-3xl { font-size: var(--font-size-3xl); } .2xl\:text-4xl { font-size: var(--font-size-4xl); } .2xl\:text-5xl { font-size: var(--font-size-5xl); } .2xl\:text-6xl { font-size: var(--font-size-6xl); } .2xl\:text-7xl { font-size: var(--font-size-7xl); } .2xl\:text-8xl { font-size: var(--font-size-8xl); } .2xl\:text-9xl { font-size: var(--font-size-9xl); } } @media (min-width: 1920px) { .3xl\:text-xs { font-size: var(--font-size-xs); } .3xl\:text-sm { font-size: var(--font-size-sm); } .3xl\:text-base { font-size: var(--font-size-base); } .3xl\:text-lg { font-size: var(--font-size-lg); } .3xl\:text-xl { font-size: var(--font-size-xl); } .3xl\:text-2xl { font-size: var(--font-size-2xl); } .3xl\:text-3xl { font-size: var(--font-size-3xl); } .3xl\:text-4xl { font-size: var(--font-size-4xl); } .3xl\:text-5xl { font-size: var(--font-size-5xl); } .3xl\:text-6xl { font-size: var(--font-size-6xl); } .3xl\:text-7xl { font-size: var(--font-size-7xl); } .3xl\:text-8xl { font-size: var(--font-size-8xl); } .3xl\:text-9xl { font-size: var(--font-size-9xl); } }