/* ========================================================================== TeleTonicMD — Brand Tokens v2.1 (single source of truth) Palette: "sage / olive / apricot" (green-led), Newsreader + Figtree. This file is the canonical token layer. It is mirrored into: • the marketing site (public_html/teletonicmd/ — this copy) • the patient portal (teletonicmd-app/video-service/public/brand-tokens.css) • the subpage stylesheet + portal.css + site.css import these vars The React Native app mirrors these values in src/theme/TeletonicTheme.js. When a value changes, change it HERE and propagate — never fork. ========================================================================== */ :root { /* ---- Brand pastels — one job each ------------------------------------- powder = interactive tints / focus · sage = leaf motif, success, washes lavender = one ambient wash per view · blush = testimonials + app card apricot = the single warm counterpoint · brass = the only metallic */ --powder-blue: #A8DADC; --sage: #DCE6D6; /* primary pastel wash */ --sage-deep: #D1E2C9; /* success tint, leaf fills */ --lavender: #E6E6FA; --blush: #F8E7E7; --apricot: #F3D3BC; --apricot-text:#8D4F28; /* AA on apricot */ --champagne: #EFE6D8; /* notices */ /* stone: the soft sage-olive from the mark, the one pastel in the green family. NON-TEXT ONLY. It measures 2.86:1 on cream and 2.63:1 on sand, so it must never carry text and must never be the sole indicator of an interactive boundary (no focus rings). Safe as a chip fill -- --ink on stone is 4.13:1, fine for a graphic -- and as a decorative border on white (3.00:1). */ --stone: #8A9A7B; /* stone lightened 40% toward cream. This is the one that can sit UNDER content: --ink on it is 6.58:1, so a small tracked label is readable, where full --stone gives only 4.13:1 and fails. Use --stone for chips, --stone-tint for bands. */ --stone-tint: #B7C0AB; /* Sage & Stone ramp (2026-09-09). The site's greens and the logo's were different families: the palette sat at hue ~155deg / 33% sat, the mark at hue 96-135deg / 8-16%. Retuned to the mark's olive. Every value here is WCAG AA in the role it holds -- as text on cream, sand and champagne, and behind white text where it carries a button. */ /* ---- Ink ramp — carries all text, CTAs, dark surfaces ---------------- */ --ink: #333D2C; /* olive ink: headlines, footer, dark blocks */ --action: #4A5940; /* buttons, active states */ --action-hover:#5E6A58; /* hovers, secondary strokes */ --label: #5E6A58; /* tracked micro-labels (AA on cream/sand) */ /* ---- Warm neutrals ---------------------------------------------------- */ --cream: #FBF9F4; /* page canvas */ --sand: #F4EFE7; /* alt surface bands */ --white: #FFFFFF; /* raised cards */ --hairline: #E5DED2; /* every border */ --hairline-strong:#DED8CF; --brass: #B8912F; /* mark · focus rings · one accent per view */ --brass-ink: #7C5E1A; /* warm-gold label text (AA on cream/sand/champagne) */ --brass-pale: #EAD9A8; /* pale gold — labels on olive/ink surfaces */ /* ---- Text ------------------------------------------------------------- */ --text-primary: #2D3A26; --text-secondary: #515F4A; --text-muted: #63705D; /* ---- Semantic states -------------------------------------------------- */ --success: #24634F; --success-bg: #EDF5E9; --warning: #8D4F28; /* apricot text tone */ --warning-bg: #FBEBDD; --error: #B4534B; /* muted brick — never pure red */ --error-bg: #F9EEEC; /* WASH RULE: opaque fills carry the FINAL hue; transparent tints are specified so the COMPOSITE does. Warm cream drags an alpha overlay ~15-25deg warm, so a tint source equal to --sage over-rotates the composite past the olive band (h82 over cream, measured). Verify composites, not sources: .5 over cream = h90, over white = h105. */ /* ---- Tint washes ------------------------------------------------------ */ --powder-tint: rgba(168, 218, 220, 0.18); --sage-tint: rgba(216, 230, 212, 0.5); --sage-tint-22: rgba(206, 226, 201, 0.35); --apricot-tint: rgba(243, 211, 188, 0.3); --ink-wash: rgba(51, 61, 44, 0.06); /* button-hover, quiet fills */ /* ---- Shadows — tinted to the brand ink -------------------------------- */ --shadow-paper: 0 10px 40px rgba(0, 0, 0, 0.04); /* THE card shadow */ --shadow-paper-hover: 0 14px 44px rgba(0, 0, 0, 0.07); --shadow-sm: 0 1px 2px rgba(23, 45, 36, 0.04), 0 4px 12px rgba(23, 45, 36, 0.04); --shadow-md: 0 1px 2px rgba(23, 45, 36, 0.05), 0 10px 28px rgba(23, 45, 36, 0.07); --shadow-lg: 0 2px 4px rgba(23, 45, 36, 0.05), 0 20px 40px -16px rgba(23, 45, 36, 0.16); --shadow-xl: 0 24px 60px rgba(23, 45, 36, 0.14); /* ---- Type scale (~1.33) ---------------------------------------------- */ --serif: 'Newsreader', Georgia, 'Times New Roman', serif; --sans: 'Figtree', system-ui, -apple-system, sans-serif; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-body: 1.0625rem; --text-lead: 1.1875rem; --text-h4: 1.25rem; --text-h3: clamp(1.5rem, 1.3rem + 0.8vw, 1.75rem); --text-h2: clamp(2rem, 1.5rem + 2vw, 2.75rem); --text-display: clamp(2.75rem, 2rem + 3vw, 4rem); --tracking-label: 0.14em; /* uppercase micro-labels */ --tracking-eyebrow: 0.18em; /* ---- Spacing (8pt) ---------------------------------------------------- */ --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2rem; --space-6: 3rem; --space-8: 4rem; --space-12: 6rem; --section-pad-y: clamp(5rem, 6vw + 2rem, 8rem); --gutter: clamp(1.25rem, 5vw, 4rem); --content-max: 1200px; --content-narrow: 44rem; /* ~65ch prose measure */ --header-h: 76px; /* ---- Radius scale ----------------------------------------------------- */ --radius-pill: 999px; /* buttons, chips, pills */ --radius-lg: 24px; /* hero panels, dark blocks */ --radius: 12px; /* cards (the default) */ --radius-sm: 8px; /* inputs, small surfaces */ --radius-xs: 4px; /* tags */ /* ---- Motion — one signature curve, tiered durations ------------------ */ --ease-luxe: cubic-bezier(0.22, 1, 0.36, 1); /* the brand curve */ --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 180ms; --dur-base: 300ms; --dur-slow: 600ms; --reveal-rise: 12px; /* scroll-reveal travel */ --reveal-stagger: 80ms; /* ---- Legacy aliases (kept so existing selectors don't break) --------- */ --ink-900: var(--ink); --teal-900: var(--action); --teal-700: var(--action-hover); --teal-600: var(--label); --mint-green: var(--sage-deep); --warm-white: var(--cream); --light-gray: var(--sand); --blush-pink: var(--blush); --soft-yellow: var(--champagne); --border-warm: var(--hairline); --border-color: var(--hairline); --gold: var(--brass); --primary-color: var(--action); --secondary-color: var(--sage-deep); --accent-color: var(--lavender); --background-color: var(--cream); --surface-color: var(--sand); --highlight-color: var(--champagne); --dark-navy: var(--ink); --off-white: var(--cream); --medium-gray: var(--text-muted); --red-accent: var(--error); --success-text: var(--success); --lavender-tint: var(--sage-tint); --mint-tint: var(--sage-tint-22); } /* ---- Icon system ------------------------------------------------------ Usage: (sprite via brand-icons.js) Inherits color from context; size via font-size or the size modifiers. */ .icon { width: 1.25em; height: 1.25em; display: inline-block; vertical-align: -0.2em; color: var(--ink); flex-shrink: 0; } .icon--sm { width: 1em; height: 1em; } .icon--lg { width: 1.6em; height: 1.6em; } .icon--xl { width: 2.25em; height: 2.25em; } .icon--action { color: var(--action); } .icon--label { color: var(--label); } .icon--muted { color: var(--text-muted); } .icon--brass { color: var(--brass); } .icon--cream { color: var(--cream); } /* icon in a soft round chip (feature/empty-state) */ .icon-chip { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--sage-tint); color: var(--action); } .icon-chip .icon { width: 1.4rem; height: 1.4rem; }