/* ========================================================================== Longevity Genetics Design Tokens Genomic longevity intelligence. Teal primary, deep navy, gold accent for longevity/premium positioning. Plus Jakarta Sans and Inter as fallback fonts. Light-mode clinical aesthetic. ========================================================================== */ /* ---------- You Sans @font-face ---------- Bespoke typeface. Place WOFF2 files in app/assets/fonts/ and uncomment these declarations once font files are available. Until then, the system falls back to Plus Jakarta Sans (display) and Inter (UI) via the Google Fonts link in the layout. @font-face { font-family: "You Sans"; src: url("You_Sans-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "You Sans"; src: url("You_Sans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "You Sans"; src: url("You_Sans-Regular_Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "You Sans"; src: url("You_Sans-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "You Sans"; src: url("You_Sans-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "You Sans"; src: url("You_Sans-Black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; } ---------- end font-face ---------- */ :root { /* ---------- Core palette (teal system) ---------- */ --color-deepest: #002845; /* Dark navy — text anchor, footer bg */ --color-primary: #0A7E85; /* Teal — buttons, primary actions */ --color-primary-hover: #01454B; /* Dark teal — hover/focus states */ --color-primary-deep: #013A3F; /* Darkest teal — active/pressed states */ --color-mid: #39CFBA; /* Bright teal — links, accents, rings */ --color-light: #D4F0ED; /* Light teal wash — subtle backgrounds */ --color-lightest: #EEFAF7; /* Barely-there teal */ --color-accent: #F4D247; /* Gold — longevity, premium, warmth */ --color-accent-hover: #E5C13A; /* Darker gold for hover states */ --color-accent-light: #FDF6DB; /* Light gold wash */ --color-natural: #F5F6F6; /* Light gray — section backgrounds */ --color-natural-dark: #E2E4E5; /* Gray border */ --color-muted: #6B7B8D; /* Muted navy — secondary text */ --color-secondary: #48A1ED; /* Bright blue — illustration accent */ --color-secondary-light: #D8ECFC; /* Light blue wash */ /* ---------- Supplementary accents ---------- */ --color-pink: #FFACAC; /* Pink — warm accent for illustrations */ --color-pink-light: #FFF0F0; /* ---------- Semantic surfaces ---------- */ --color-surface: #FAFBFB; /* Near-white — main background */ --color-surface-alt: #F2F4F4; /* Slightly darker — alternating sections */ --color-surface-card: #FFFFFF; /* Cards and elevated surfaces */ --color-border: #D8DDE0; /* Primary border */ --color-border-light: #ECF0F2; /* Subtle border */ /* ---------- Text ---------- */ --color-text: #002845; /* Primary text — navy */ --color-text-muted: #4A6275; /* Secondary text */ --color-text-dim: #8A9AAA; /* Tertiary / placeholder text */ /* ---------- Severity (clinical traffic-light, shared across verticals) --- */ --color-critical: #B91C1C; --color-critical-bg: #FEF2F2; --color-critical-border: #FECACA; --color-warning: #C2410C; --color-warning-bg: #FFF7ED; --color-warning-border: #FED7AA; --color-caution: #A16207; --color-caution-bg: #FEFCE8; --color-caution-border: #FEF08A; --color-normal: #15803D; --color-normal-bg: #F0FDF4; --color-normal-border: #BBF7D0; /* ---------- White alpha scale ---------- */ --white-5: rgba(255, 255, 255, 0.05); --white-8: rgba(255, 255, 255, 0.08); --white-10: rgba(255, 255, 255, 0.10); --white-20: rgba(255, 255, 255, 0.20); --white-30: rgba(255, 255, 255, 0.30); --white-40: rgba(255, 255, 255, 0.40); --white-50: rgba(255, 255, 255, 0.50); --white-60: rgba(255, 255, 255, 0.60); --white-70: rgba(255, 255, 255, 0.70); --white-80: rgba(255, 255, 255, 0.80); --white-90: rgba(255, 255, 255, 0.90); --white-95: rgba(255, 255, 255, 0.95); /* ---------- Navy alpha scale ---------- */ --navy-5: rgba(0, 40, 69, 0.05); --navy-8: rgba(0, 40, 69, 0.08); --navy-10: rgba(0, 40, 69, 0.10); --navy-15: rgba(0, 40, 69, 0.15); --navy-20: rgba(0, 40, 69, 0.20); --navy-30: rgba(0, 40, 69, 0.30); --navy-40: rgba(0, 40, 69, 0.40); --navy-50: rgba(0, 40, 69, 0.50); --navy-60: rgba(0, 40, 69, 0.60); --navy-70: rgba(0, 40, 69, 0.70); --navy-80: rgba(0, 40, 69, 0.80); --navy-90: rgba(0, 40, 69, 0.90); --navy-95: rgba(0, 40, 69, 0.95); /* ---------- Fluid typography ---------- */ --text-xs: clamp(0.75rem, 0.71rem + 0.18vw, 0.8125rem); --text-sm: clamp(0.8125rem, 0.77rem + 0.24vw, 0.875rem); --text-base: clamp(0.9375rem, 0.88rem + 0.30vw, 1.0625rem); --text-lg: clamp(1.125rem, 1.03rem + 0.48vw, 1.3125rem); --text-xl: clamp(1.375rem, 1.22rem + 0.73vw, 1.6875rem); --text-2xl: clamp(1.75rem, 1.51rem + 1.09vw, 2.25rem); --text-3xl: clamp(2.25rem, 1.87rem + 1.82vw, 3.125rem); --text-display: clamp(2.75rem, 2.15rem + 2.91vw, 4.125rem); /* ---------- Font families ---------- You Sans is a bespoke typeface (Typotheque). Falls back to Plus Jakarta Sans (similar humanist warmth) for headings and Inter for UI until You Sans WOFF2 files are loaded. Fallback stack: "Helvetica Neue", Helvetica, Arial. */ --font-display: "You Sans", "Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-sans: "You Sans", "Inter", ui-sans-serif, system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; /* ---------- 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-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; /* ---------- Section spacing (fluid) ---------- */ --section-xs: clamp(1.5rem, 1.14rem + 1.82vw, 2rem); --section-sm: clamp(2rem, 1.64rem + 1.82vw, 3rem); --section-md: clamp(2.5rem, 2.00rem + 2.42vw, 4rem); --section-lg: clamp(3rem, 2.27rem + 3.64vw, 5rem); --section-xl: clamp(4rem, 3.09rem + 4.24vw, 6.5rem); /* ---------- Border radius ---------- 7-8px for buttons, 12px for cards, 16-20px for containers. Mapped to a 6-step scale matching the convention. */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 9999px; /* ---------- Shadows (navy-tinted, clinical) ---------- */ --shadow-sm: 0 1px 2px var(--navy-5); --shadow-md: 0 4px 12px var(--navy-10); --shadow-lg: 0 12px 19px var(--navy-10), 0 1px 6px var(--navy-10); --shadow-xl: 0 16px 48px var(--navy-20); /* ---------- Transitions ---------- */ --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* ---------- Layout ---------- */ --max-width: 1200px; --max-width-narrow: 800px; } @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-normal: 0ms; --duration-slow: 0ms; } }