/* ============================================= * AVENLO — Global Theme & Base Styles * Token-driven base layer. Adapts automatically * to [data-theme="dark"|"light"] on . * * Load order: variables.css → theme.css → * responsive.css → bootstrap → page CSS. * ============================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; background-color: var(--bg-app); color: var(--text-primary); } body { margin: 0; min-height: 100vh; font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--text-primary); background-color: var(--bg-app); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color var(--transition-base), color var(--transition-base); } /* Headings ---------------------------------- */ h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--space-3); font-family: var(--font-sans); font-weight: var(--fw-semibold); line-height: var(--lh-tight); color: var(--text-primary); } h1 { font-size: var(--fs-3xl); } h2 { font-size: var(--fs-2xl); } h3 { font-size: var(--fs-xl); } h4 { font-size: var(--fs-lg); } h5 { font-size: var(--fs-md); } h6 { font-size: var(--fs-base); } p { margin: 0 0 var(--space-3); color: var(--text-secondary); } /* Links -------------------------------------- */ a { color: var(--primary); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--primary-light); text-decoration: underline; } a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-sm); } /* Selection ---------------------------------- */ ::selection { background-color: var(--primary); color: var(--text-inverse); } /* Scrollbar ---------------------------------- */ * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background-color: var(--border-default); border-radius: var(--radius-full); border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background-color: var(--border-strong); background-clip: content-box; } /* Focus ring (global) ----------------------- */ :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } button:focus, [role="button"]:focus, input:focus, select:focus, textarea:focus { outline: none; } button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* Form controls ----------------------------- */ input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="tel"], input[type="url"], input[type="date"], input[type="datetime-local"], input[type="time"], textarea, select { width: 100%; padding: var(--space-3) var(--space-4); font-family: inherit; font-size: var(--fs-base); color: var(--input-text); background-color: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-md); transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast); } /* Dropdowns need a solid surface so the native option list is readable (the rule above gives selects a near-transparent --input-bg, which leaves the open