/* ======================================================================== RADCHEM THEME TOKENS ------------------------------------------------------------------------ This file is the single source of truth for brand, surface, typography, border, shape, and interaction values. Rebrand rule: update the values here first. Component/page CSS should reference these variables instead of literal color values. ======================================================================== */ :root { /* Typography — client-selected pairing: Montserrat (headings) + Karla (body), chosen for a professional, easy-to-read corporate/pharma feel. Overrides the --font-heading / --font-body vars set in radchem.css; this file loads after it, so this wins. */ --font-heading: "Roboto", sans-serif; --font-body: "Nunito", sans-serif; } /* Utility classes — use these instead of inline style="font-family:...". Real

-

tags already pick up --font-heading automatically (see radchem.css base styles); these two classes are only for text that LOOKS like a heading but isn't a heading tag (e.g. a logo wordmark, a large stat number). Changing the font pairing above is now the only edit ever needed — nothing to hunt down in the pages. */ .font-heading { font-family: var(--font-heading); } .font-body { font-family: var(--font-body); } :root { /* Brand */ --rc-color-primary: #1073B6; --rc-color-primary-hover: #0C5A8F; --rc-color-primary-dark: #073B5C; --rc-color-primary-soft: #DCEDFA; /* static fallback for browsers without color-mix() support */ --rc-color-accent: #A1C324; --rc-color-accent-hover: #7A9219; /* Surfaces */ --rc-color-surface-page: #FFFFFF; --rc-color-surface-subtle: #F8FCFF; --rc-color-surface-blue: #E8F4FD; --rc-color-surface-blue-soft: #F4FAFE; --rc-color-surface-green: #F4F9E6; --rc-color-surface-green-soft: #FAFDF3; --rc-color-surface-dark: #073B5C; /* Text */ --rc-color-text-heading: #17212B; --rc-color-text-body: #364554; --rc-color-text-muted: #72808D; --rc-color-text-on-brand: #FFFFFF; --rc-color-text-on-accent: #17212B; --rc-color-text-on-primary: #FFFFFF; --rc-color-surface-accent-soft: #F4F9E6; /* Hero sizing (paired with the rc-hero-* size variants below) */ --rc-hero-padding-y: 6rem; --rc-hero-padding-y-mobile: 3.5rem; --rc-hero-min-height: 0; --rc-hero-fullscreen-min-height: 100vh; --rc-hero-compact-padding-y: 4.25rem; --rc-hero-large-padding-y: 8rem; /* Borders */ --rc-color-border-default: #DCEEF8; --rc-color-border-subtle: #E6F0F6; --rc-color-border-strong: #BFDFF2; --rc-color-border-accent: #D9E9A5; --rc-color-border-accent-strong: #A1C324; --rc-color-grid: rgba(16, 115, 182, 0.055); /* Layout / component dimensions */ --rc-header-height: 4.5rem; /* Navigation */ --rc-nav-surface: var(--rc-color-surface-page); --rc-nav-text: var(--rc-color-text-heading); --rc-nav-border: var(--rc-color-border-subtle); --rc-color-border-blue-strong: var(--rc-color-border-strong); --rc-nav-hover-surface: var(--rc-color-surface-blue-soft); /* Footer */ --rc-footer-surface: var(--rc-color-surface-dark); --rc-footer-text: var(--rc-color-text-on-brand); --rc-footer-border: rgba(255, 255, 255, 0.14); --rc-footer-muted: rgba(255, 255, 255, 0.72); /* Forms */ --rc-color-input-border: var(--rc-color-border-strong); --rc-color-input-border-hover: var(--rc-color-primary); --rc-color-input-border-focus: var(--rc-color-primary); /* Button sizes */ --rc-button-height-sm: 2.5rem; --rc-button-height-md: 2.75rem; --rc-button-height-lg: 3.25rem; /* Component surfaces */ --rc-color-surface-card: var(--rc-color-surface-page); --rc-color-surface-card-hover: var(--rc-color-surface-blue-soft); /* Focus / form */ --rc-color-focus-ring: rgba(16, 115, 182, 0.28); --rc-color-focus-ring-accent: rgba(161, 195, 36, 0.28); --rc-color-input-background: #FFFFFF; --rc-color-input-placeholder: #72808D; /* Shape / elevation */ --rc-radius-sm: 0.5rem; --rc-radius-md: 0.75rem; --rc-radius-lg: 0.875rem; --rc-radius-pill: 9999px; --rc-shadow-sm: 0 2px 10px rgba(7, 59, 92, 0.06); --rc-shadow-md: 0 8px 28px rgba(7, 59, 92, 0.08); --rc-shadow-lg: 0 14px 36px rgba(7, 59, 92, 0.12); --rc-shadow-accent: 0 8px 24px rgba(161, 195, 36, 0.22); --rc-duration-fast: 160ms; --rc-duration-base: 220ms; --rc-ease-standard: cubic-bezier(.4, 0, .2, 1); /* Backward-compatible aliases used by earlier RadChem layers. */ --rc-brand-primary: var(--rc-color-primary); --rc-brand-primary-hover: var(--rc-color-primary-hover); --rc-brand-primary-dark: var(--rc-color-primary-dark); --rc-brand-accent: var(--rc-color-accent); --rc-brand-accent-hover: var(--rc-color-accent-hover); --rc-surface-page: var(--rc-color-surface-page); --rc-surface-soft: var(--rc-color-surface-subtle); --rc-surface-blue: var(--rc-color-surface-blue); --rc-surface-blue-soft: var(--rc-color-surface-blue-soft); --rc-surface-green: var(--rc-color-surface-green); --rc-surface-green-soft: var(--rc-color-surface-green-soft); --rc-border-subtle: var(--rc-color-border-subtle); --rc-border-blue: var(--rc-color-border-default); --rc-border-blue-strong: var(--rc-color-border-strong); --rc-border-green: var(--rc-color-border-accent); --rc-text-heading: var(--rc-color-text-heading); --rc-text-body: var(--rc-color-text-body); --rc-text-muted: var(--rc-color-text-muted); --rc-text-on-brand: var(--rc-color-text-on-brand); --rc-shadow-card: var(--rc-shadow-md); --rc-shadow-card-hover: var(--rc-shadow-lg); --rc-radius-card: var(--rc-radius-lg); --rc-radius-button: var(--rc-radius-md); --rc-transition: var(--rc-duration-base) var(--rc-ease-standard); } /* Progressive enhancement: browsers that support color-mix() get a soft tint that automatically follows --rc-color-primary on rebrand. Browsers without support keep the static fallback set above. */ @supports (color: color-mix(in srgb, red, red)) { :root { --rc-color-primary-soft: color-mix(in srgb, var(--rc-color-primary) 14%, white); } } /* Theme maintenance notes: - Brand colors are changed here first. - Component styles must consume semantic rc-* tokens. - Legacy --color-* variables in radchem.css are compatibility aliases only. - Avoid hard-coded brand hex values in components/pages. */