/* Shared design-token system for every TelegramDir page — one file, cached once by the browser, instead of the same :root block duplicated inline in every page template. Light values are the existing brand palette; dark values apply automatically via prefers-color-scheme UNLESS the visitor has manually picked a theme with the navbar toggle, in which case a data-theme="dark"/"light" attribute on (set by theme-toggle.js, persisted in localStorage) takes precedence over the OS setting. */ :root { --tg: #0055A6; --tg-dark: #003d7a; --accent: #149137; --muted: #5c6c7a; --tap: 44px; --bg: #f4f7fa; --surface: #ffffff; --text: #22313f; --text-secondary: #56697b; --border: #e3ebf2; --border-strong: #dbe6ef; --badge-bg: #eef4f9; --radius-sm: .5rem; --radius-md: .7rem; --radius-lg: 1rem; --shadow-sm: 0 1px 3px rgba(20,40,60,.06); --shadow-md: 0 8px 20px rgba(20,40,60,.1); --shadow-lg: 0 12px 28px rgba(20,40,60,.14); color-scheme: light; } @media (prefers-color-scheme: dark) { :root { --tg: #3b8ce0; --tg-dark: #1f6cb8; --accent: #3ccb6a; --muted: #9aacc0; --bg: #0f1720; --surface: #182533; --text: #eaf2fb; --text-secondary: #b7c6d8; --border: #2a3a4d; --border-strong: #34475d; --badge-bg: #1f2f40; --shadow-sm: 0 1px 3px rgba(0,0,0,.35); --shadow-md: 0 8px 20px rgba(0,0,0,.45); --shadow-lg: 0 12px 28px rgba(0,0,0,.55); color-scheme: dark; } } /* Manual overrides — win over the OS preference above since these rules are more specific ([data-theme=x] beats a plain :root inside a media query at equal specificity only by source order, so keeping them last matters). */ :root[data-theme="dark"] { --tg: #3b8ce0; --tg-dark: #1f6cb8; --accent: #3ccb6a; --muted: #9aacc0; --bg: #0f1720; --surface: #182533; --text: #eaf2fb; --text-secondary: #b7c6d8; --border: #2a3a4d; --border-strong: #34475d; --badge-bg: #1f2f40; --shadow-sm: 0 1px 3px rgba(0,0,0,.35); --shadow-md: 0 8px 20px rgba(0,0,0,.45); --shadow-lg: 0 12px 28px rgba(0,0,0,.55); color-scheme: dark; } :root[data-theme="light"] { --tg: #0055A6; --tg-dark: #003d7a; --accent: #149137; --muted: #5c6c7a; --bg: #f4f7fa; --surface: #ffffff; --text: #22313f; --text-secondary: #56697b; --border: #e3ebf2; --border-strong: #dbe6ef; --badge-bg: #eef4f9; --shadow-sm: 0 1px 3px rgba(20,40,60,.06); --shadow-md: 0 8px 20px rgba(20,40,60,.1); --shadow-lg: 0 12px 28px rgba(20,40,60,.14); color-scheme: light; } /* Reusable primitives new components can opt into — existing per-page rules keep working untouched, these are additive, not a forced rewrite. */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease; } .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); } .section-label { font-weight: 800; color: var(--text); border-left: 4px solid var(--tg); padding: .1rem 0 .1rem .7rem; } .badge-pill { background: var(--badge-bg); color: var(--text-secondary); border: 1px solid var(--border-strong); font-weight: 600; } /* Focus-visible ring, consistent everywhere, kept separate from :hover/:active so keyboard users get a clear indicator even where a mouse-hover state already exists — WCAG 2.4.7. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--tg); outline-offset: 2px; }