/* ============================================================================ Caregiver — tokens.css --------------------------------------------------------------------------- Design tokens for mycaregiver.io. Ported from the Sandwich design system. Single source of truth — every color, type size, spacing value, motion duration, radius, and shadow used on the marketing site comes from this file. --------------------------------------------------------------------------- Light mode is the default. Dark mode is supported via prefers-color-scheme. Override .theme-light / .theme-dark on to force one. ============================================================================ */ :root, .theme-light { /* ---------- Surfaces ---------- */ --color-bg: #f6f1ea; /* Linen — page background */ --color-surface: #fbf7f0; /* Cream — cards, header bar */ --color-surface-2: #ffffff; /* True white — rarely used */ --color-surface-offset: #ebe3d6; /* Oat — section breaks, alt cards */ --color-surface-offset-2: #e2d8c4; --color-divider: #d9cfba; /* Flax */ --color-border: #d2c7b0; /* ---------- Text ---------- */ --color-text: #2b2a27; /* Graphite — body */ --color-text-muted: #6a645a; /* Slate — subheads, captions */ --color-text-faint: #6a645a; /* Slate — disclaimers (AA on oat) */ --color-text-inverse: #fbf7f0; /* Cream on dark surfaces */ /* ---------- Brand: primary (Sage / Forest) ---------- */ --color-primary: #3b6b5e; /* Sage 600 — CTAs, links (AA 5.7:1 on cream) */ --color-primary-hover: #2d5a4d; --color-primary-active: #234c48; --color-primary-ink: #234c48; /* Forest 800 — display type */ --color-primary-highlight: #d6e4df; /* Sage 100 — badges, wash */ /* ---------- Brand: signal (Peach) ---------- */ --color-signal: #e88d6a; /* Peach 500 — decorative dot / icon fills only */ --color-signal-hover: #d87250; --color-signal-highlight: #f8dfd1; /* Peach 100 — wash, badge bg */ --color-signal-text: #a04b22; /* Terracotta — peach used as text (AA 5.30:1 on linen) */ --color-signal-text-large: #b85a30; /* Terracotta light — large-text peach (AA-large 4.11:1) */ /* ---------- Semantic (used sparingly on marketing site) ---------- */ --color-alert: #c9512f; /* Brick — destructive only */ --color-alert-highlight: #f4d8cd; --color-warning: #d8b24a; /* Honey */ --color-warning-highlight: #f3e7bf; --color-success: #6b9e5b; /* Meadow — "encrypted" badge */ --color-success-highlight: #dbe8d1; --color-info: #5b8db4; /* Slate Blue — provider accents */ --color-info-highlight: #d3e1ec; /* ---------- Focus ring ---------- */ --color-focus-ring: #3b6b5e; --focus-ring: 0 0 0 3px rgba(59, 107, 94, 0.40); /* ---------- Radii ---------- */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-full: 9999px; /* ---------- Spacing scale (4-px base) ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* ---------- Typography: families ---------- */ --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-body: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace; /* ---------- Typography: weights ---------- */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ---------- Typography: leading ---------- */ --leading-tight: 1.12; /* hero display */ --leading-snug: 1.22; /* H1, H2 */ --leading-normal: 1.45; /* H3, subheads */ --leading-relaxed: 1.55; /* body */ --leading-loose: 1.7; /* long-form */ /* ---------- Typography: tracking ---------- */ --tracking-tight: -0.015em; /* display */ --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.14em; /* eyebrow uppercase */ /* ---------- Typography: size scale ---------- */ /* Fluid scale: clamp(min, target-vw, max). Mobile-first. */ --size-hero: clamp(2.5rem, 4.2vw + 1.5rem, 4.5rem); /* 40 → 72 */ --size-h1: clamp(2rem, 2.6vw + 1.25rem, 3rem); /* 32 → 48 */ --size-h2: clamp(1.625rem, 1.6vw + 1rem, 2.25rem); /* 26 → 36 */ --size-h3: clamp(1.25rem, 0.6vw + 1rem, 1.5rem); /* 20 → 24 */ --size-body-lg: 1.125rem; /* 18 */ --size-body: 1.0625rem; /* 17 */ --size-body-sm: 1rem; /* 16 */ --size-caption: 0.875rem; /* 14 */ --size-eyebrow: 0.75rem; /* 12 */ /* ---------- Motion ---------- */ --motion-micro: 120ms ease-out; --motion-interactive: 220ms cubic-bezier(0.16, 1, 0.3, 1); --motion-soft: 320ms cubic-bezier(0.16, 1, 0.3, 1); --motion-deliberate: 420ms cubic-bezier(0.16, 1, 0.3, 1); /* ---------- Shadows (warm-tinted, low-key) ---------- */ --shadow-sm: 0 1px 2px rgba(62, 47, 24, 0.06), 0 1px 1px rgba(62, 47, 24, 0.04); --shadow-md: 0 6px 18px rgba(62, 47, 24, 0.08), 0 2px 4px rgba(62, 47, 24, 0.04); --shadow-lg: 0 18px 40px rgba(62, 47, 24, 0.14), 0 4px 10px rgba(62, 47, 24, 0.06); --shadow-glass: 0 14px 50px rgba(35, 76, 72, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5); /* ---------- Layout ---------- */ --container-max: 1200px; --container-narrow: 720px; --container-prose: 640px; --gutter: clamp(1.25rem, 3vw, 2.5rem); /* ---------- Z-index ---------- */ --z-base: 1; --z-sticky: 10; --z-overlay: 50; --z-modal: 100; --z-toast: 200; } /* ============================================================================ Marketing site is intentionally light-mode only. The warm linen palette is part of the brand expression and the illustrations are drawn for it. The Caregiver iOS app handles dark mode separately. The .theme-dark class below is retained so the same token file can be reused inside dark-mode product surfaces (e.g. embedded widgets), but it is no longer triggered by prefers-color-scheme on this site. ============================================================================ */ .theme-dark { --color-bg: #1b1a17; --color-surface: #22201c; --color-surface-2: #2a2723; --color-surface-offset: #2f2c27; --color-surface-offset-2: #363229; --color-divider: #3a3630; --color-border: #47423a; --color-text: #f1ebdf; --color-text-muted: #a89f8e; --color-text-faint: #7a7162; --color-text-inverse: #1b1a17; --color-primary: #78b0a2; --color-primary-hover: #8cbfb2; --color-primary-active: #a4d1c5; --color-primary-ink: #c2e0d8; --color-primary-highlight: #2e4a44; --color-signal: #f1a582; --color-signal-hover: #f6b898; --color-signal-highlight: #4b2f23; --color-success: #8fbf7c; --color-success-highlight: #2a3a22; --color-info: #7faece; --color-info-highlight: #1f3548; --color-focus-ring: #78b0a2; --focus-ring: 0 0 0 3px rgba(120, 176, 162, 0.45); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.2); --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.2); --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.45), 0 4px 10px rgba(0, 0, 0, 0.25); --shadow-glass: 0 14px 50px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05); }