/** * HandyHub Liberia — Design Tokens * * Self-hosted fonts + the full color/type/spacing token system from the * brand blueprint (Section 2) and the approved page previews. Every other * stylesheet in this theme should read colors and type from these custom * properties — never hardcode a hex value or font-family in a component * file. This is also the single file to edit if the brand palette changes. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/inter-var.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/poppins-600.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/poppins-700.woff2') format('woff2'); } :root { /* brand palette */ --hh-blue: #0B5FFF; --hh-blue-ink: #0A2A66; --hh-gold: #F5A623; --hh-green: #1E9E5A; --hh-red: #E0393E; --hh-ink: #1F2430; --hh-ink-soft: #565F73; --hh-line: #E2E6EE; --hh-cloud: #F4F6F9; --hh-surface: #FFFFFF; --hh-surface-raised: #FFFFFF; --hh-on-navy: #EDF1FB; --hh-on-navy-soft: #A9B7DC; --hh-focus: #0B5FFF; --hh-font-display: 'Poppins', 'Segoe UI Semibold', system-ui, sans-serif; --hh-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --hh-radius-s: 6px; --hh-radius-m: 10px; --hh-radius-l: 18px; --hh-shadow-card: 0 1px 2px rgba(10, 42, 102, 0.06), 0 8px 24px -12px rgba(10, 42, 102, 0.18); --hh-shadow-pop: 0 24px 56px -18px rgba(10, 42, 102, 0.38); color-scheme: light; } @media (prefers-color-scheme: dark) { :root { --hh-blue: #4C86FF; --hh-blue-ink: #0C1730; --hh-gold: #F5A623; --hh-green: #35C27E; --hh-red: #F0605F; --hh-ink: #E7EAF3; --hh-ink-soft: #A3ACC4; --hh-line: #2A3352; --hh-cloud: #131A30; --hh-surface: #0E1428; --hh-surface-raised: #171F3B; --hh-on-navy: #EDF1FB; --hh-on-navy-soft: #93A2CC; --hh-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -12px rgba(0, 0, 0, 0.5); --hh-shadow-pop: 0 24px 56px -18px rgba(0, 0, 0, 0.65); color-scheme: dark; } } /* * These two overrides let a manual theme toggle (e.g. a "dark mode" switch * added later) win over the OS preference by stamping data-theme on . * No toggle ships in this theme yet — these are here so one can be added * without having to touch every component file's colors. */ html[data-theme="dark"] { --hh-blue: #4C86FF; --hh-blue-ink: #0C1730; --hh-gold: #F5A623; --hh-green: #35C27E; --hh-red: #F0605F; --hh-ink: #E7EAF3; --hh-ink-soft: #A3ACC4; --hh-line: #2A3352; --hh-cloud: #131A30; --hh-surface: #0E1428; --hh-surface-raised: #171F3B; --hh-on-navy: #EDF1FB; --hh-on-navy-soft: #93A2CC; --hh-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -12px rgba(0, 0, 0, 0.5); --hh-shadow-pop: 0 24px 56px -18px rgba(0, 0, 0, 0.65); color-scheme: dark; } html[data-theme="light"] { --hh-blue: #0B5FFF; --hh-blue-ink: #0A2A66; --hh-gold: #F5A623; --hh-green: #1E9E5A; --hh-red: #E0393E; --hh-ink: #1F2430; --hh-ink-soft: #565F73; --hh-line: #E2E6EE; --hh-cloud: #F4F6F9; --hh-surface: #FFFFFF; --hh-surface-raised: #FFFFFF; --hh-on-navy: #EDF1FB; --hh-on-navy-soft: #A9B7DC; --hh-shadow-card: 0 1px 2px rgba(10, 42, 102, 0.06), 0 8px 24px -12px rgba(10, 42, 102, 0.18); --hh-shadow-pop: 0 24px 56px -18px rgba(10, 42, 102, 0.38); color-scheme: light; }