/* ============================================================ UBCAR.ro — Global Styles Base typography, body, headings, paragraphs, links ============================================================ */ /* ---------------------------------------- Body ---------------------------------------- */ body { font-family: var(--font-family-primary); font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--color-text); background-color: var(--color-bg); overflow-x: hidden; } /* ---------------------------------------- Headings ---------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-family-heading); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-gray-900); letter-spacing: var(--letter-spacing-tight); } h1 { font-size: var(--font-size-4xl); margin-bottom: var(--space-6); } h2 { font-size: var(--font-size-3xl); margin-bottom: var(--space-5); } h3 { font-size: var(--font-size-2xl); margin-bottom: var(--space-4); } h4 { font-size: var(--font-size-xl); margin-bottom: var(--space-3); } h5 { font-size: var(--font-size-lg); margin-bottom: var(--space-3); } h6 { font-size: var(--font-size-md); margin-bottom: var(--space-2); } /* Responsive heading sizes */ @media (max-width: 767px) { h1 { font-size: var(--font-size-3xl); } h2 { font-size: var(--font-size-2xl); } h3 { font-size: var(--font-size-xl); } h4 { font-size: var(--font-size-lg); } } /* ---------------------------------------- Paragraphs & Text ---------------------------------------- */ p { margin-bottom: var(--space-4); max-width: 72ch; /* Optimal line length for readability */ } .lead { font-size: var(--font-size-lg); line-height: var(--line-height-relaxed); color: var(--color-text-secondary); text-align: justify; } small, .text-sm { font-size: var(--font-size-sm); } .text-xs { font-size: var(--font-size-xs); } .text-muted { color: var(--color-text-muted); } strong, b { font-weight: var(--font-weight-semibold); } /* ---------------------------------------- Links ---------------------------------------- */ a { color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; transition: color var(--transition-fast); } a:hover { color: var(--color-link-hover); } a:focus-visible { outline: 3px solid var(--color-primary-500); outline-offset: 3px; border-radius: var(--radius-sm); } /* ---------------------------------------- Lists ---------------------------------------- */ ul, ol { padding-left: var(--space-6); margin-bottom: var(--space-4); } li { margin-bottom: var(--space-2); } li::marker { color: var(--color-primary-500); } /* ---------------------------------------- Blockquote ---------------------------------------- */ blockquote { border-left: 4px solid var(--color-primary-500); padding: var(--space-4) var(--space-6); margin: var(--space-6) 0; background-color: var(--color-bg-alt); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-style: italic; color: var(--color-text-secondary); } /* ---------------------------------------- Horizontal Rule ---------------------------------------- */ hr { border: none; border-top: 1px solid var(--color-gray-200); margin: var(--space-8) 0; } /* ---------------------------------------- Selection ---------------------------------------- */ ::selection { background-color: var(--color-primary-100); color: var(--color-primary-900); } /* ---------------------------------------- Font Loading Inter is loaded via Google Fonts CDN (see tags in HTML ) ---------------------------------------- */