/* ═══════════════════════════════════════════════════════════════════════════ Hepatology Society — Design Tokens ═══════════════════════════════════════════════════════════════════════════ The semantic layer for the member profile surfaces. Components reference --hs-* only; no component file contains a raw hex value. SCOPE. These tokens are declared on :root but are consumed only by the .hs-profile and .hs-workspace roots. They do not restyle the rest of the site — the older --nexus-* tokens still govern every other module. That is deliberate: re-pointing --nexus-color-accent would recolour every module at once, which is a separate, deliberate change. CONTRAST. Every text/background pair below is verified against WCAG AA. Measured ratios (see docs/profile-redesign-plan.md): ink on paper 17.51 ink on surface 18.42 ink-muted on paper 6.36 ink-muted on surface 6.69 ink-subtle on paper 3.28 (non-text / large only, 3:1 floor) accent on paper 10.49 white on accent 11.04 verified on paper 5.78 white on verified 6.09 warning on paper 5.63 inactive on paper 6.19 Re-run the checker in docs/ before changing any colour. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Surfaces ─────────────────────────────────────────────────────────── Warm paper ground, pure white cards. Never grey-on-grey. */ --hs-paper: #FAF9F7; --hs-surface: #FFFFFF; --hs-surface-sunken: #F5F3F0; --hs-hairline: #E8E4DF; --hs-hairline-strong: #D8D2CA; /* ── Ink — three steps, no more ─────────────────────────────────────── */ --hs-ink: #141414; --hs-ink-muted: #5C5C5C; --hs-ink-subtle: #8A8A8A; --hs-ink-on-accent: #FFFFFF; /* ── Brand accent — society oxblood ───────────────────────────────────── Primary actions and the active state. Nowhere else. PLACEHOLDER: sampled value pending the logo file. Re-point these three and the entire surface follows. */ --hs-accent: #6B2233; --hs-accent-hover: #571B29; --hs-accent-active: #45151F; --hs-accent-tint: #F3E9EB; --hs-accent-ring: rgba(107, 34, 51, 0.16); /* ── State colours ────────────────────────────────────────────────────── Clinical teal is reserved exclusively for verified + active membership, so "verified" reads instantly and never competes with the CTA. */ --hs-state-verified: #0F6E68; --hs-state-verified-tint: #E4F0EF; --hs-state-warning: #8A5A00; --hs-state-warning-tint: #FBF0DC; --hs-state-inactive: #9B3F52; --hs-state-inactive-tint: #F9E9EC; --hs-state-neutral: #5C5C5C; --hs-state-neutral-tint: #F0EEEB; /* ── Typography ───────────────────────────────────────────────────────── A display serif for names and section headings against a neutral grotesk for UI and data. The serif is what makes this read as a society rather than a directory. */ --hs-font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Georgia, serif; --hs-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --hs-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; /* Bangla. Defined so Bangla renders correctly the moment it appears; the webfonts are deliberately NOT loaded (there is no Bangla content on the site yet, and four extra families is a real LCP cost on mobile). To ship them, add the families to Nexus_Profile_Assets::FONT_URL and nothing here needs to change. */ --hs-font-bn-display: 'Tiro Bangla', 'Noto Serif Bengali', 'Kalpurush', var(--hs-font-display); --hs-font-bn-ui: 'Hind Siliguri', 'Noto Sans Bengali', 'SolaimanLipi', var(--hs-font-ui); --hs-text-xs: 0.75rem; /* 12 */ --hs-text-sm: 0.8125rem; /* 13 */ --hs-text-base: 0.9375rem; /* 15 */ --hs-text-md: 1.0625rem; /* 17 */ --hs-text-lg: 1.375rem; /* 22 */ --hs-text-xl: 1.75rem; /* 28 */ --hs-text-2xl: 2.25rem; /* 36 */ --hs-text-3xl: 2.75rem; /* 44 */ --hs-leading-tight: 1.15; --hs-leading-snug: 1.35; --hs-leading-normal: 1.6; --hs-leading-relaxed: 1.75; --hs-tracking-tight: -0.02em; --hs-tracking-normal: 0; --hs-tracking-wide: 0.04em; --hs-tracking-caps: 0.08em; /* ── Spacing — 8px scale ───────────────────────────────────────────── */ --hs-space-1: 4px; --hs-space-2: 8px; --hs-space-3: 16px; --hs-space-4: 24px; --hs-space-5: 32px; --hs-space-6: 48px; --hs-space-7: 64px; --hs-space-8: 96px; /* ── Radius ────────────────────────────────────────────────────────── */ --hs-radius-sm: 6px; --hs-radius-md: 10px; --hs-radius-lg: 16px; --hs-radius-xl: 24px; --hs-radius-full: 999px; /* ── Elevation ────────────────────────────────────────────────────────── One soft shadow for resting cards, one for lift. A card gets a border OR a shadow, never both. */ --hs-shadow-card: 0 1px 2px rgba(20, 16, 12, 0.04), 0 4px 16px rgba(20, 16, 12, 0.04); --hs-shadow-lift: 0 2px 6px rgba(20, 16, 12, 0.06), 0 12px 32px rgba(20, 16, 12, 0.08); --hs-shadow-focus: 0 0 0 3px var(--hs-accent-ring); /* ── Layout ────────────────────────────────────────────────────────── */ --hs-measure: 68ch; --hs-container: 1120px; --hs-container-narrow: 780px; /* ── Motion ───────────────────────────────────────────────────────────── Consumed by both CSS and assets/js/hs-motion.js. Durations collapse to 0ms under prefers-reduced-motion (see the block at the end). */ --hs-dur-instant: 100ms; --hs-dur-fast: 150ms; --hs-dur-base: 180ms; --hs-dur-slow: 260ms; --hs-dur-slower: 320ms; --hs-dur-ring: 700ms; --hs-ease-out: cubic-bezier(0.2, 0, 0, 1); --hs-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --hs-ease-exit: cubic-bezier(0.4, 0, 1, 1); /* Touch target floor. Every interactive control honours this. */ --hs-tap: 44px; } /* ── Bangla ───────────────────────────────────────────────────────────────── Applies wherever content is marked up as Bangla. Because it keys off :lang(), a single inside an English heading switches only that run — which is what the bilingual header needs. */ .hs-profile :lang(bn), .hs-workspace :lang(bn) { font-family: var(--hs-font-bn-ui); line-height: var(--hs-leading-relaxed); } .hs-profile :lang(bn):is(h1, h2, h3, .hs-display), .hs-workspace :lang(bn):is(h1, h2, h3, .hs-display) { font-family: var(--hs-font-bn-display); } /* ── Reduced motion ───────────────────────────────────────────────────────── Under reduce, every duration collapses to 0 and only opacity survives. hs-motion.js reads the same media query and skips transform work entirely, so this is belt and braces rather than the only guard. */ @media (prefers-reduced-motion: reduce) { :root { --hs-dur-instant: 0ms; --hs-dur-fast: 0ms; --hs-dur-base: 0ms; --hs-dur-slow: 0ms; --hs-dur-slower: 0ms; --hs-dur-ring: 0ms; } .hs-profile *, .hs-profile *::before, .hs-profile *::after, .hs-workspace *, .hs-workspace *::before, .hs-workspace *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }