/* ========================================================================== NOVACares — Design Tokens Source of truth: NOVACares Brand Package v1.0 (2026-07-31) Spec: NOVACARES_REDESIGN_SPEC.md v3.2 §2 (Branding), §5 (Design system) RULE: no hex value, font name, or radius may appear anywhere else in the codebase. Every stylesheet, template and component references these vars. Changing the brand = editing this file only. Enforced by setup/check-tokens.sh. Location: public/assets/css/tokens.css (loaded first, before all CSS) Verified 4 Aug 2026 against docs/brand/novacares-tokens.css (the brand package's own token file): · --c-ink corrected #1A1A1A → #173A46 (brand --nc-ink; spec §2) · --text-muted corrected #5C6B70 → #5E747C (brand --nc-muted) · --border-subtle and --status-error have no brand equivalent — derived functional values, documented in SHELL_REPORT.md. ========================================================================== */ :root { /* --- Brand palette ----------------------------------------------------- Matches Brand Guidelines v1.0 exactly (docs/brand/). */ --c-deep-teal: #0F3F4C; /* primary — headers, nav, footer, headings */ --c-care-teal: #2A8C8C; /* secondary — buttons, links, active states */ --c-seafoam: #CFE9E8; /* tints — cards, callouts, table stripes */ --c-gold-spark: #D4A843; /* accent — sparingly; ≤10% of any screen */ --c-soft-white: #F5F7F7; /* page background */ --c-ink: #173A46; /* body text (brand --nc-ink) */ /* Colour distribution target (§2 Branding): ~70% neutral (soft white / white / ink), ~20% teal family, ≤10% gold. Gold is punctuation, never a surface: no gold panels, no gold body text. */ /* --- Semantic aliases -------------------------------------------------- Components use THESE, not the raw palette above. If a component needs a colour with no alias, add the alias here rather than reaching past it. */ --bg-page: var(--c-soft-white); --bg-surface: #FFFFFF; --bg-subtle: var(--c-seafoam); --bg-inverse: var(--c-deep-teal); --text-primary: var(--c-ink); --text-heading: var(--c-deep-teal); --text-muted: #5E747C; /* brand --nc-muted */ --text-inverse: var(--c-soft-white); --text-link: var(--c-care-teal); --border-subtle: #DDE5E6; /* derived: seafoam-grey, no brand equiv */ --border-strong: var(--c-deep-teal); --action-primary: var(--c-care-teal); --action-primary-hover: var(--c-deep-teal); --action-accent: var(--c-gold-spark); /* CTAs only, sparingly */ --status-ok: var(--c-care-teal); --status-warn: var(--c-gold-spark); --status-error: #B3261E; /* derived: brand has no red */ --ev-accent: var(--c-care-teal); /* events (.badge-ev) accent */ /* --- Typography -------------------------------------------------------- Avenir Next is commercial — NO webfont licence is purchased (§2). Apple devices render true Avenir Next; everyone else gets self-hosted Nunito Sans. Arial is the final fallback named in the guidelines. Self-hosting also removes the Google Fonts dependency (audit finding). */ --font-brand: "Avenir Next", "Nunito Sans", Arial, sans-serif; --font-body: "Avenir Next", "Nunito Sans", Arial, sans-serif; --fw-black: 900; /* "NOVA" in wordmark, major display headings */ --fw-bold: 700; /* "Cares", h2/h3, buttons */ --fw-medium: 500; --fw-regular: 400; /* body */ /* Editorial template (§5.1) reads larger than app template */ --fs-display: 2.25rem; --fs-h1: 1.875rem; --fs-h2: 1.375rem; --fs-h3: 1.125rem; --fs-body: 1rem; --fs-body-lg: 1.0625rem; /* Stories body */ --fs-small: 0.875rem; --fs-caption: 0.75rem; --lh-tight: 1.25; --lh-body: 1.6; --lh-loose: 1.75; /* Stories long-form */ /* --- Spacing (4px base) ----------------------------------------------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-8: 3rem; --sp-10: 4rem; /* --- Layout (§5.4) ----------------------------------------------------- */ --width-editorial: 720px; /* Stories, About */ --width-app: 960px; /* Apps, Community, My account */ --width-nav: 1140px; /* --- Shape & depth ----------------------------------------------------- */ --radius-sm: 6px; --radius-md: 10px; /* cards */ --radius-lg: 16px; --radius-pill: 999px; --shadow-card: 0 1px 2px rgba(15, 63, 76, 0.06), 0 2px 8px rgba(15, 63, 76, 0.05); --shadow-raised:0 4px 16px rgba(15, 63, 76, 0.10); --focus-ring: 0 0 0 3px rgba(42, 140, 140, 0.45); /* keyboard a11y */ /* --- Motion ------------------------------------------------------------ */ --ease: cubic-bezier(0.2, 0, 0.2, 1); --dur-fast: 120ms; --dur-base: 200ms; /* --- Component sizing (added aliases; documented) ----------------------- */ --tap-target: 44px; /* minimum touch target, §5.4 mobile-first */ } /* Self-hosted fallback face — files in public/assets/fonts/ Only the weights actually used, woff2 only, swap to avoid FOIT. Files not yet present (see fonts/README.md): browsers skip a missing @font-face source and fall through to Arial, the brand's named fallback. */ @font-face { font-family: "Nunito Sans"; src: url("../fonts/nunito-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Nunito Sans"; src: url("../fonts/nunito-sans-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Nunito Sans"; src: url("../fonts/nunito-sans-900.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; } }