/* ========================================================= HCMS — Design Tokens Full rebrand: "Modern medicine, delivered home." Warm clinical premium — evergreen + warm clay + ivory + sage. ========================================================= */ :root { /* Light is the intentional default. Dark is opt-in via (planned future). Tokens below are theme-aware so dark needs no per-component rewrite. */ color-scheme: light; /* ---- Brand color ---- */ --evergreen: #0B5C53; /* primary — trust, medical */ --evergreen-deep: #0A4A43; --evergreen-darker:#073833; --evergreen-soft: #1C7268; /* hover / lighter */ --evergreen-tint: #E3EEEA; /* very light bg wash */ --clay: #DD8A66; /* accent — warmth, humanity */ --clay-soft: #ECB294; --clay-deep: #B85C36; /* CTA bg (AA with white, bold) */ --clay-darker: #9E4D2E; /* CTA hover */ --clay-text: #763A22; /* clay as small text — AA (≥4.5) on ivory, surface, tint, cream & sage */ --clay-tint: #F8EAE1; --sage: #CFE0D6; /* calm section tint */ --sage-deep: #A9C7B7; --gold: #E8B45C; /* small highlights (decorative fills) */ --gold-deep: #B0741F; /* gold as a meaningful mark — AA graphical (≥3:1) on light bg, e.g. rating stars */ /* ---- Neutrals (warm) ---- */ --ivory: #FBF8F3; /* page base */ --cream: #F4EEE4; /* alt section */ --surface: #FFFFFF; /* cards */ --ink: #1E2A28; /* primary text */ --ink-soft: #3D4A45; /* secondary text (AA on ivory) */ --stone: #4C5B56; /* muted labels / captions — AA (≥4.5) on ivory, surface, cream & sage */ --line: #E7E0D4; /* hairline borders */ --line-strong: #D8CFBF; /* ---- Semantic ---- */ --primary: var(--evergreen); --primary-ink: #FFFFFF; --cta: var(--clay-deep); --cta-hover: var(--clay-darker); --cta-ink: #FFFFFF; --success: #2E7D5B; --error: #B23B3B; --focus: #0B5C53; /* Semantic FOREGROUND tokens — brand hues used as *text*, not fills. Light values match the originals exactly (light output is unchanged); the dark theme flips only these, so fills/borders keep brand color. */ --text-link: var(--evergreen); /* body links */ --text-link-hover: var(--evergreen-deep); /* link hover, nav hover/current */ --text-accent: var(--evergreen-deep); /* emphasis text: stat nums, brand name, timeline */ --on-tint: var(--evergreen-deep); /* fg on evergreen-tint / sage chips & icons */ --on-clay-tint: var(--clay-darker); /* fg on clay-tint chips & icons */ --success-text: var(--success); /* success message text */ /* ---- Typography ---- */ --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif; --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Fluid type scale (base body = 18px). */ --fs-100: 0.78rem; /* 14 — micro */ --fs-200: 0.875rem; /* 15.75 — small */ --fs-300: 1rem; /* 18 — body-sm / UI */ --fs-400: 1.125rem; /* ~20 — body */ --fs-500: clamp(1.25rem, 0.9rem + 1vw, 1.5rem); /* lead */ --fs-600: clamp(1.5rem, 1.1rem + 1.6vw, 2rem); /* h4/h3 */ --fs-700: clamp(2rem, 1.4rem + 2.6vw, 2.9rem); /* h2 */ --fs-800: clamp(2.5rem, 1.6rem + 4vw, 4rem); /* h1 */ --fs-900: clamp(3rem, 1.7rem + 6vw, 5.25rem); /* hero display */ --lh-tight: 1.08; --lh-snug: 1.22; --lh-body: 1.62; --tracking-tight: -0.02em; --tracking-wide: 0.08em; /* ---- Spacing (4 / 8 rhythm) ---- */ --space-2: 0.125rem; --space-4: 0.25rem; --space-6: 0.375rem; --space-8: 0.5rem; --space-12: 0.75rem; --space-16: 1rem; --space-20: 1.25rem; --space-24: 1.5rem; --space-32: 2rem; --space-40: 2.5rem; --space-48: 3rem; --space-64: 4rem; --space-80: 5rem; --space-96: 6rem; --space-128: 8rem; /* Section vertical padding (fluid) */ --section-y: clamp(3.5rem, 2rem + 6vw, 7rem); /* ---- Layout ---- */ --container: 1180px; --container-wide: 1320px; --container-narrow: 760px; --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem); /* ---- Radii ---- */ --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-2xl: 44px; --r-pill: 999px; --arch: 50% 50% 0 0 / 26% 26% 0 0; /* doorway / arch top */ /* ---- Shadows (warm, green-tinted) ---- */ --shadow-xs: 0 1px 2px rgba(10, 56, 51, 0.06); --shadow-sm: 0 2px 8px rgba(10, 56, 51, 0.07); --shadow-md: 0 8px 24px rgba(10, 56, 51, 0.09); --shadow-lg: 0 18px 48px rgba(10, 56, 51, 0.12); --shadow-xl: 0 32px 70px rgba(10, 56, 51, 0.16); --shadow-cta: 0 10px 24px rgba(184, 92, 54, 0.28); /* ---- Motion ---- */ --dur-fast: 150ms; --dur: 230ms; --dur-slow: 340ms; --dur-slower: 520ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in: cubic-bezier(0.5, 0, 0.75, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ---- Z-index scale ---- */ --z-base: 1; --z-raised: 10; --z-sticky: 100; --z-dropdown: 200; --z-overlay: 800; --z-widget: 900; --z-modal: 1000; --z-skip: 1100; /* ---- Header height (for scroll offsets) ---- */ --header-h: 84px; } /* ========================================================= DARK THEME — inert scaffold (no toggle yet; opt-in only). Activate by setting . Light stays the live default. Brand evergreen/clay hues persist; only neutrals, decorative tints, accent-text and shadows flip. All text/surface pairs verified WCAG AA (worst ≈ 4.9:1). ========================================================= */ [data-theme="dark"] { color-scheme: dark; /* Warm evergreen-tinted neutrals (never pure black) */ --ivory: #0F1B19; /* page base */ --cream: #14211E; /* alt section */ --surface: #1B2823; /* cards (lifted above page) */ --ink: #F2EDE4; /* primary text */ --ink-soft: #CBD4CD; /* secondary text */ --stone: #9BA8A0; /* muted labels / captions */ --line: #2A3833; /* hairline borders */ --line-strong: #3B4A44; /* Decorative washes become dark surfaces (used as chip/pill/section bg) */ --evergreen-tint: #15332D; --clay-tint: #3A241B; --sage: #1F3A33; --sage-deep: #2C4D43; /* Accent foregrounds lighten so they read on dark (all ≥7:1 on dark surfaces) */ --clay-text: #E6A07A; /* clay as small text (eyebrow) */ --gold-deep: #E8B45C; /* stars: original gold reads fine on dark */ /* Semantic foregrounds flip to light tints of the brand hues */ --text-link: #6FC9BA; /* links */ --text-link-hover: #8FD3C6; /* link/nav hover */ --text-accent: #8FD3C6; /* stat nums, brand name, timeline */ --on-tint: #8FD3C6; /* fg on dark evergreen wash */ --on-clay-tint: #E6A07A; /* fg on dark clay wash */ --success-text: #6FD39B; /* success message text */ /* Shadows: deepen so they register on near-black */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5); --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.55); --shadow-xl: 0 32px 70px rgba(0, 0, 0, 0.6); }