/* ============================================================ FINDMYCHEMIST — DESIGN TOKENS (the single source of truth for the look) ------------------------------------------------------------ Palette : monochrome — white background + neutral grays — plus ONE accent hue, sage green (--brand, #4C6E5D), used for nav/footer bands, buttons, links and active states. ONE functional red (--color-error) is the only other color, for form errors. Ads use a SEPARATE navy/indigo palette (see js/ads.js + the .ad-* rules in base.css) so they read as advertising, not site. Type : one fixed 8-step ladder, --text-2xs (10px) … --text-3xl (24px). EVERY font-size must be a var(--text-*) — never a raw rem/px. Width : one column width, --content-page (960px); every section band uses it (nav/footer are full-width chrome; results is full-bleed). Restyle : recolor the whole site by editing --brand below (+ the dark block); rescale all text by editing the --text-* ladder; rewiden by editing --content-page. Dark theme is the :root[data-theme="dark"] block. ============================================================ */ :root { /* ONE brand accent — change this to recolor the site (see also the dark block) */ --brand: #4C6E5D; --brand-hover: #3F5A4D; --brand-text: #3F6350; /* the accent as text/links on white — AA */ --color-highlight: #C6402C; /* warm coral — the animated hero word only (pops vs the near-black title) */ /* Type Scale — tight & uniform, modelled on a restrained tool UI (Claude Code). Small, fixed steps so headings sit close to body/nav and never balloon; hierarchy comes from weight/color, not dramatic size jumps. Range 10–24px. */ --text-2xs: 0.625rem; /* 10px — disclaimers / legal (smallest on the page) */ --text-xs: 0.6875rem; /* 11px — micro labels, badges, meta */ --text-sm: 0.75rem; /* 12px — nav, secondary text */ --text-base: 0.8125rem; /* 13px — body, inputs, buttons */ --text-lg: 0.875rem; /* 14px — emphasized body, card titles */ --text-xl: 1rem; /* 16px — section headings */ --text-2xl: 1.25rem; /* 20px — page / hero titles */ --text-3xl: 1.5rem; /* 24px — largest hero */ /* Spacing */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-7: 1.75rem; --space-8: 2rem; --space-9: 2rem; --space-10: 2.25rem; --space-12: 2.5rem; --space-14: 2.75rem; --space-16: 2.5rem; --space-20: 2.75rem; --space-24: 3rem; /* Layout */ --content-narrow: 640px; --content-default: 960px; --content-wide: 1280px; --content-page: 960px; /* THE one content-column width — every section band uses this */ /* Radii */ --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-2xl: 1.5rem; --radius-full: 9999px; /* Transitions */ --transition-fast: 140ms cubic-bezier(0.16, 1, 0.3, 1); --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1); --transition-slow: 320ms cubic-bezier(0.16, 1, 0.3, 1); /* One typeface */ --font-display: 'Inter', 'Helvetica Neue', sans-serif; --font-body: 'Inter', 'Helvetica Neue', sans-serif; /* === MONOCHROME — black / white / neutral grays. Color is reserved for one functional signal (error red). Hierarchy comes from weight + gray step, never hue. === */ /* Surfaces — pure white + neutral grays */ --color-bg: #FFFFFF; --color-surface: #FFFFFF; --color-surface-2: #F5F5F4; --color-surface-offset: #F0F0EF; --color-divider: #EAEAEA; --color-border: #E0E0E0; --color-field: #F2F2F1; /* Text — near-black to mid-gray */ --color-text: #141414; --color-text-muted: #3A3A3A; --color-text-subtle: #565656; --color-text-faint: #6E6E6E; --color-text-inverse: #FFFFFF; /* Primary — the ONE accent hue: sage green. Structure / links / active. */ --color-primary: var(--brand); --color-primary-hover: var(--brand-hover); --color-primary-active: var(--brand-text); --color-primary-light: #E7EEE9; /* chip / tint background */ --color-primary-mid: #C4D4C8; /* chip / control border */ --color-primary-text: var(--brand-text); /* links / active text — green, AA on white */ --color-band: var(--brand); /* nav / footer / hero bands — green, white text AA */ /* Accent — same green. Colored buttons use the banner shade, not a 2nd hue. */ --color-accent: var(--brand); --color-accent-hover: var(--brand-hover); --color-accent-light: #E7EEE9; --color-accent-text: var(--brand-text); --color-accent-strong: var(--brand); /* CTA fill — white text clears AA */ --color-accent-strong-hover: var(--brand-hover); /* States — grayscale, except green success + one functional red for errors */ --color-success: var(--brand); --color-success-light: #E7EEE9; --color-warning: #3A3A3A; --color-warning-light: #F0F0EF; --color-error: #B42318; --color-error-light: #FBEAE8; /* Specialty tags — neutral gray */ --tag-compound: #3A3A3A; --tag-hormone: #3A3A3A; --tag-pediatric: #3A3A3A; --tag-veterinary: #3A3A3A; --tag-oncology: #3A3A3A; --tag-sterile: #3A3A3A; /* Shadows — neutral black, soft */ --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.05); --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.08), 0 1px 2px rgb(0 0 0 / 0.05); --shadow-md: 0 4px 16px rgb(0 0 0 / 0.10); --shadow-lg: 0 12px 40px rgb(0 0 0 / 0.12); --shadow-xl: 0 24px 64px rgb(0 0 0 / 0.15); } /* ============================================================ DARK THEME — toggled via [data-theme="dark"] on Same green accent, inverted surfaces; ads keep their own navy palette. ============================================================ */ :root[data-theme="dark"] { --color-bg: #0E0E0E; --color-surface: #171717; --color-surface-2: #1F1F1F; --color-surface-offset: #1E1E1E; --color-field: #1F1F1F; --color-text: #F4F4F4; --color-text-muted: #C6C6C6; --color-text-subtle: #A6A6A6; --color-text-faint: #8C8C8C; --color-text-inverse: #FFFFFF; --color-divider: rgba(255,255,255,0.08); --color-border: rgba(255,255,255,0.12); /* sage green is the accent on dark too; green (not black) bands */ --color-primary: #7CA88E; --color-primary-hover: #8FB89F; --color-primary-active: #A2C6B0; --color-primary-light: #26382E; --color-primary-mid: #37513F; --color-primary-text: #9CC3AC; /* green links on dark bg */ --color-band: #3A5145; /* nav / footer band — dark sage, white text */ --color-accent: #7CA88E; --color-accent-hover: #8FB89F; --color-accent-light: #26382E; --color-accent-text: #9CC3AC; --color-accent-strong: #4C6E5D; /* green CTA fill — white text */ --color-accent-strong-hover: #3F5A4D; --color-success: #7CA88E; --color-success-light: #26382E; --color-warning: #C6C6C6; --color-warning-light: #262626; --color-error: #E5877A; --color-error-light: #2A1A17; --color-highlight: #FF9A8B; --tag-compound: #C6C6C6; --tag-hormone: #C6C6C6; --tag-pediatric: #C6C6C6; --tag-veterinary: #C6C6C6; --tag-oncology: #C6C6C6; --tag-sterile: #C6C6C6; --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.30); --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.36), 0 1px 2px rgb(0 0 0 / 0.28); --shadow-md: 0 4px 16px rgb(0 0 0 / 0.44); --shadow-lg: 0 12px 40px rgb(0 0 0 / 0.52); --shadow-xl: 0 24px 64px rgb(0 0 0 / 0.60); }