/* 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. There used to be a second, dark set of these values (applied via prefers-color-scheme, or manually via a navbar toggle that set data-theme="dark"/"light" on , persisted in localStorage) — removed by request, so this is now the only palette and it's flat regardless of OS or user preference. header.js no longer renders the toggle button, and the inline script every template used to set data-theme before first paint is gone too. 2026-07-26: settled on a Telegram-blue primary (#229ED9) + sky-blue accent (#0EA5E9) on a cool slate-gray neutral base (#F8FAFC bg / #1F2937 text) -- a more standard SaaS-style palette, given by explicit hex values. Prior same-day history: cream/coral -> colorhunt blue/mint -> flat grayscale -> solid Telegram blue -> this. --tg/--tg-dark keep their names since dozens of rules across every CSS file/server.js template reference them. 2026-09-21: --tg-dark redefined (#0EA5E9 -> #0C6690). The old value was picked for hue, not contrast -- measured against white it's 2.77:1, which fails WCAG AA even for large text, yet it's what every secondary link (.l-user, .detail-user, hover states, focus rings) used as its text color. #0C6690 is the same blue family, actually reads as "darker" (unlike the old value, which was arguably brighter than --tg itself), and measures 6.33:1 on white / 5.75:1 on --badge-bg -- comfortably past AA. --tg itself is untouched (3.02:1 is fine for the large-scale fills/icons it's used for, and it's the literal Telegram brand blue -- not swapping it). Shadow tint also moved from neutral slate (rgba(31,41,55,..)) to a faint blue tint (rgba(10,80,120,..)) -- cards now read as "this brand's cards", not the generic grey-shadow-under-white-rectangle SaaS-kit default. */ :root { --tg: #229ED9; --tg-dark: #0C6690; --muted: #6B7280; --tap: 44px; --bg: #F8FAFC; --surface: #ffffff; --text: #1F2937; --text-secondary: #4B5563; --border: #E5E7EB; --border-strong: #D1D5DB; --badge-bg: #EFF6FF; --radius-sm: .6rem; --radius-md: .85rem; --radius-lg: 1.2rem; --radius-pill: 999px; --shadow-sm: 0 1px 3px rgba(10,80,120,.08); --shadow-md: 0 8px 20px rgba(10,80,120,.14); --shadow-lg: 0 14px 32px rgba(10,80,120,.20); /* Type scale -- roughly a 1.2 ratio, Elements-of-Typographic-Style-style, so every page pulls headings/labels from the same steps instead of each template inventing its own rem value (1.05rem section headers next to 1.1rem guide-card headers next to 1.5rem category h1s, etc. -- close enough to be inconsistent, not close enough to look intentional). */ --fs-xs: .75rem; --fs-sm: .85rem; --fs-base: 1rem; --fs-md: 1.15rem; --fs-lg: 1.4rem; --fs-xl: 1.85rem; --fs-2xl: 2.35rem; /* hueOf()/CATEGORY_META in server.js (mirrored in index.html) still set --cat-hue inline per listing/category — the plumbing stays since it's harmless and been reactivated before, but components.css no longer consumes it (flat --badge-bg/--tg treatment everywhere instead), so these three tokens are currently unused. Left defined rather than ripped out in case colors come back a third time. */ --cat-sat: 68%; --cat-light: 42%; --cat-bg-light: 93%; color-scheme: light; } /* Reusable primitives new components can opt into — existing per-page rules keep working untouched, these are additive, not a forced rewrite. Borderless by design: definition comes from --shadow-sm/-md (cards) or a tinted --badge-bg fill (pills) instead of a stroke, so surfaces read as soft, floating layers rather than boxes with an outline drawn around them. */ .card { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease; } .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md), 0 0 0 1px color-mix(in srgb, var(--tg) 25%, transparent); } .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); 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; }