/* ============================================================ tokens.css — Robust Health design tokens Phase 3c-1 foundation. Companion to LAYOUT.md and MOTION.md. Architecture: - This file: variable definitions only + @font-face. - components.css: uses these tokens to define .rh-* classes. - bootstrap-overrides.css: maps Bootstrap defaults to these tokens. Load order in : bootstrap.min.css → tokens.css → bootstrap-overrides.css → components.css → page-specific.css ============================================================ */ /* ── Self-hosted Inter (variable font) ─────────────────────── */ /* Download InterVariable.woff2 from rsms.me/inter (v4.0+ — the variable build covers weights 100-900 in a single file, ~200 KB). Place at: /assets/fonts/inter/InterVariable.woff2 We use weights 400, 500, 600 only. The variable axis range is declared so any out-of-range request snaps to the nearest available. Never request weight 700 — system enforces 600 max. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/assets/fonts/inter/InterVariable.woff2') format('woff2-variations'), url('/assets/fonts/inter/InterVariable.woff2') format('woff2'); } /* ── Tokens ───────────────────────────────────────────────── */ :root { /* === Surface colors === */ --bg: #FAFAF7; /* Page background — warm off-white */ --surface: #FFFFFF; /* Cards, sheets, modals */ --sunken: #F2F0E8; /* Inputs, progress tracks, code blocks */ /* === Borders === */ --border: #C8C0AC; /* Default — card borders, dividers */ --border-emphasis: #8C8470; /* Hover, focus ring base, drag handles */ /* === Ink (text) === */ --ink-1: #1A1A18; /* Primary — body, headings, hero numbers */ --ink-2: #4A4844; /* Secondary — labels, metadata */ --ink-3: #6E6B5E; /* Tertiary — hints, disabled, inactive */ /* === Accent: kelly green === Reserved use only — primary CTA, citation tap target, focus ring, active nav. Never decorative, never body, never twice in the same card. --kelly-deep is the hover/pressed variant. --kelly-dim is for pill backgrounds carrying kelly text. */ --kelly: #2F7A33; --kelly-deep: #1F5523; --kelly-dim: rgba(47, 122, 51, 0.10); /* === Macros — functional only === Bars, dots, food-tone macro displays. Never as button colors, chrome, or backgrounds outside macro contexts. */ --macro-protein: #B07330; /* Clay */ --macro-protein-dim: rgba(176, 115, 48, 0.12); --macro-carbs: #C29B2D; /* Wheat amber */ --macro-carbs-dim: rgba(194, 155, 45, 0.12); --macro-fat: #B85A35; /* Terracotta */ --macro-fat-dim: rgba(184, 90, 53, 0.12); /* === Signals === Only when the system has something to say. */ --signal-success: #2F6B40; /* Goals achieved, sync confirmed */ --signal-success-dim: rgba(47, 107, 64, 0.12); --signal-caution: #A07020; /* Approaching limit, threshold near */ --signal-caution-dim: rgba(160, 112, 32, 0.12); --signal-alert: #9A2D2D; /* Errors, over-limit, destructive */ --signal-alert-dim: rgba(154, 45, 45, 0.12); /* === Type scale (mobile) === Inter, weights 400/500/600. Sentence case throughout the system. Tabular numerics (font-feature-settings: 'tnum') applied via the .tnum utility class on any numeric value. */ --type-display-size: 36px; --type-display-weight: 600; --type-display-leading: 1.05; --type-display-tracking: -0.02em; --type-title-size: 22px; --type-title-weight: 500; --type-title-leading: 1.2; --type-title-tracking: -0.01em; --type-subtitle-size: 18px; --type-subtitle-weight: 500; --type-subtitle-leading: 1.25; --type-subtitle-tracking: -0.005em; --type-body-size: 16px; --type-body-weight: 400; --type-body-leading: 1.45; --type-label-size: 14px; --type-label-weight: 500; --type-label-leading: 1.3; --type-meta-size: 14px; --type-meta-weight: 400; --type-meta-leading: 1.35; --type-stat-label-size: 12px; --type-stat-label-weight: 500; --type-stat-label-leading: 1.2; --type-stat-label-tracking: 0.01em; /* Desktop type scale defined below (≥768px media query). Per-page rem sweep deferred to per-page tranches. */ /* === Spacing scale (4px base) === Usage rules in LAYOUT.md. If you reach for a value not on this scale, reach for the next-larger one first. */ --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; /* === Border radii === */ --radius-sm: 6px; /* Small inline elements */ --radius-md: 10px; /* Inputs, buttons */ --radius-lg: 14px; /* Cards, sheets */ --radius-xl: 20px; /* Bottom sheet top corners, large modals */ /* === Motion === Usage rules in MOTION.md. */ --duration-instant: 60ms; /* Button press */ --duration-fast: 120ms; /* Hover, color shift */ --duration-base: 200ms; /* Default state transitions */ --duration-slow: 300ms; /* Sheet slide, modal fade */ --duration-page: 400ms; /* Page-level changes */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* Default */ --ease-emphatic: cubic-bezier(0.3, 0, 0, 1); /* Sheet, drawer entries */ --ease-decelerate: cubic-bezier(0, 0, 0.2, 1); /* Arriving elements */ --ease-accelerate: cubic-bezier(0.4, 0, 1, 1); /* Leaving elements */ /* === Z-index scale === Use these tokens — never raw numbers. */ --z-base: 0; --z-sticky: 100; /* App bar */ --z-bottom-nav: 200; --z-overlay: 300; /* Sheet/modal backdrop */ --z-modal: 400; --z-sheet: 500; --z-toast: 600; /* === Focus ring === The only box-shadow in the system. Applied to inputs and interactive elements on :focus-visible. */ --shadow-focus: 0 0 0 2px rgba(47, 122, 51, 0.25); /* === Layout === */ --tap-target-min: 44px; /* iOS HIG minimum */ --content-padding-mobile: 16px; --content-padding-desktop: 24px; --layout-max-width: 1200px; /* Vestigial v1; refined v1.5 */ --app-bar-height: 52px; --bottom-nav-height: 76px; /* + safe-area-inset-bottom */ /* === Safe area === */ --safe-area-bottom: env(safe-area-inset-bottom, 0); --safe-area-top: env(safe-area-inset-top, 0); } /* Desktop type scale — bumps small tiers up on screens ≥768px. Mobile values remain the baseline; this block makes desktop reading easier without affecting the mobile-first design. */ @media (min-width: 768px) { :root { --type-meta-size: 15px; --type-label-size: 15px; --type-stat-label-size: 13px; --type-body-size: 17px; } } /* ── Base body styles ─────────────────────────────────────── */ html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-feature-settings: 'cv11', 'ss01'; /* Inter: single-storey a, open digits */ font-size: var(--type-body-size); font-weight: var(--type-body-weight); line-height: var(--type-body-leading); color: var(--ink-1); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Tabular numerics utility — apply to any numeric value to keep columns aligned as values change. */ .tnum { font-variant-numeric: tabular-nums; } /* ── Legacy --rh-* token aliases ─────────────────────────── */ /* Several pages were built against an older token vocabulary. These aliases let that code resolve correctly without a file-by-file find-replace. Do not use --rh-* in new code. */ :root { --rh-info: var(--kelly); --rh-accent: var(--kelly); --rh-warning: var(--signal-caution); --rh-danger: var(--signal-alert); --rh-text: var(--ink-1); --rh-muted: var(--ink-3); --rh-border: var(--border); --rh-border-md: var(--border); --rh-border-focus: var(--border-emphasis); --rh-surface: var(--surface); --rh-elevated: var(--sunken); --rh-subtle: var(--sunken); --rh-bg: var(--bg); --rh-warning-dim: var(--signal-caution-dim); --rh-danger-dim: var(--signal-alert-dim); --rh-info-dim: var(--kelly-dim); } /* ── Reduced motion ───────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }