/* ============================================================ BASE — Reset, Global Styles, Typography ============================================================ */ /* Google Fonts loaded from layout.php to avoid CLS — do NOT use @import here */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-primary); background: var(--bg-base); transition: background var(--dur-normal) var(--ease-smooth), color var(--dur-normal) var(--ease-smooth); overflow-x: hidden; } ::selection { background: rgba(99,102,241,.25); color: var(--text-primary); } /* Scrollbar */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--neutral-600); border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb:hover { background: var(--neutral-500); } /* Focus */ :focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; border-radius: var(--radius-sm); } /* Links */ a { color: var(--brand-primary); text-decoration: none; } a:hover { text-decoration: underline; } /* Images */ img { max-width: 100%; height: auto; display: block; } /* Code */ code { font-family: var(--font-mono); font-size: 0.875em; } /* ── Typography Classes ──────────────────────────────────── */ .text-xs { font-size: var(--text-xs); } .text-sm { font-size: var(--text-sm); } .text-base { font-size: var(--text-base); } .text-lg { font-size: var(--text-lg); } .text-xl { font-size: var(--text-xl); } .text-2xl { font-size: var(--text-2xl); } .text-3xl { font-size: var(--text-3xl); } .text-4xl { font-size: var(--text-4xl); } .text-5xl { font-size: var(--text-5xl); } .text-6xl { font-size: var(--text-6xl); } .text-7xl { font-size: var(--text-7xl); } .font-normal { font-weight: var(--weight-normal); } .font-medium { font-weight: var(--weight-medium); } .font-semibold { font-weight: var(--weight-semibold); } .font-bold { font-weight: var(--weight-bold); } .font-black { font-weight: var(--weight-black); } .text-primary { color: var(--text-primary); } .text-secondary { color: var(--text-secondary); } .text-muted { color: var(--text-muted); } .text-inverse { color: var(--text-inverse); } .leading-tight { line-height: var(--leading-tight); } .leading-normal { line-height: var(--leading-normal); } .leading-loose { line-height: var(--leading-loose); } /* ── Layout Utils ─────────────────────────────────────────── */ .container { max-width: 1400px; margin: 0 auto; padding: 0 var(--space-6); } .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); } .gap-6 { gap: var(--space-6); } .gap-8 { gap: var(--space-8); } .hidden { display: none; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); } /* Reading progress bar */ #reading-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary)); z-index: calc(var(--z-header) + 1); transition: width 0.1s linear; } .md-export.md-export--top { padding: 10px; }