/* ============================================================================ VIGEO brand tokens — v1.0 ---------------------------------------------------------------------------- MIRRORED SHARED CONTRACT. This file is intended to be byte-identical in vigeo_health and vigeo_pt. It is deliberately NOT called a single source of truth: there are two hand-synchronised copies and no mechanism that reconciles them. ENFORCEMENT IS PARTIAL. Each repo's test compares this file to a checksum constant held in that same repo. That catches an edit made without updating the constant. It does NOT compare the two repositories to each other -- change the file and the constant together in one repo and both repos still pass while having diverged. Neither repo runs CI, so even that partial check only fires when someone runs the suite by hand. Genuine cross-repo enforcement is an open architecture decision. To change a token: edit BOTH copies in the same change, and update the checksum fixture in both test suites. Namespace: every token is --vg-*. Nothing here collides with either repo's existing --vigeo-*, --color-*, --pt-* or --text-* names, so this file can load first and be adopted call-site by call-site without a flag day. PROVENANCE. These values were drawn from the VIGEO PT site. That is a starting point, NOT an approved umbrella standard. Brand Governance lists the approved core palette as VIGEO Red #AF2D2C, Charcoal #171313, Warm Taupe #514845, Cream #FBF5F2, White, and PT Warm Neutral #FBF8F4 -- where #FBF8F4 is labelled PT-specific, and PT-unique elements stay PT-specific unless separately approved for other service lines. So treat the shared layer as: VIGEO red, Montserrat, the accessibility floors, focus treatment and semantic status colours. Page ground and supporting neutrals remain service-line expression until a documented decision says otherwise. Do not migrate a site's palette onto these values on the strength of this file alone. Two corrections from the 2026-08 audit are safe to treat as floors: - the smallest type token is 12px, never 11px - focus ring alpha never drops below 0.30 These are absolute minimums, not targets. Repository-specific design guidance overrides this scale wherever it asks for more. ============================================================================ */ :root { /* ---- Brand red ramp --------------------------------------------------- 600 is the only red that is text-safe on white (6.49:1). 500 is decorative only — do not use it for text. */ --vg-red-50: #fdf5f5; --vg-red-100: #f7e7e2; --vg-red-500: #c54b49; --vg-red-600: #af2d2c; --vg-red-700: #842120; /* dominant hover/pressed red across the design */ --vg-red-750: #8f1e1c; /* secondary dark accent */ --vg-red-800: #731d1c; /* ---- Surfaces, light --------------------------------------------------- */ --vg-paper: #fbf8f4; /* page ground */ --vg-cream: #f4ece5; /* alternate section band */ --vg-surface: #ffffff; /* cards */ --vg-line: #e5ddd6; /* borders, rules */ /* ---- Surfaces, dark ---------------------------------------------------- */ --vg-ink-900: #211d1b; /* darkest surface; also primary text */ --vg-ink-850: #24201e; /* dark section background */ --vg-ink-800: #2b2623; /* raised card on dark */ /* ---- Text on light ----------------------------------------------------- */ --vg-text-strong: #211d1b; /* headings 17.4:1 on white */ --vg-text-body: #453e3a; /* body copy 10.4:1 */ --vg-text-muted: #6e6560; /* secondary, >=14px 5.4:1 */ /* ---- Text on dark: the opacity ladder ---------------------------------- Four rungs, nothing in between. Tier 4 is for >=14px only. */ --vg-on-dark-1: rgba(255, 255, 255, 1); --vg-on-dark-2: rgba(255, 255, 255, 0.87); --vg-on-dark-3: rgba(255, 255, 255, 0.70); --vg-on-dark-4: rgba(255, 255, 255, 0.60); /* ---- Semantic state ---------------------------------------------------- Separate from the brand accent. Not decorative — these carry meaning. Note the error red is NOT #e74c3c, which fails AA on white (3.82:1). */ --vg-ok: #2e7d32; --vg-ok-bg: #e5f0e9; --vg-warn: #8a5f0a; --vg-warn-bg: #f7ecd6; --vg-error: #9c2625; --vg-error-bg: #fff4f2; /* ---- Focus ------------------------------------------------------------- A red ring on a red fill is invisible; use the inverse token there. The glow alpha must never go below 0.30 — at 0.09 it reads as nothing. */ --vg-focus-ring: 3px solid var(--vg-red-600); --vg-focus-ring-inverse: 3px solid #ffffff; --vg-focus-offset: 2px; --vg-focus-glow: 0 0 0 4px rgba(175, 45, 44, 0.3); /* ---- Typography -------------------------------------------------------- Load exactly wght@400;500;600;700;800. Any other weight is synthesised by the browser and renders as faux bold. */ --vg-font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* GENERIC FLOOR ONLY. Nothing should render below --vg-text-xs anywhere. This scale is a minimum, not a target, and it does NOT replace each repository's own design guidance. Where repository guidance asks for more than this scale, that guidance wins. vigeo_health: guidance/DESIGN_TOOLKIT.md section 3 sets higher role-based public-site minimums -- body copy 17-18px desktop and at least 16px mobile, fine print at least 14px, overline or short label at least 13px bold. vigeo_pt: docs/VIGEO_PT_VISUAL_DIRECTION.md and docs/VIGEO_PT_PAGE_BLUEPRINT.md. */ --vg-text-xs: 0.75rem; /* 12px — absolute floor; nothing below this */ --vg-text-sm: 0.875rem; /* 14px — captions, help, error text */ --vg-text-base: 1rem; /* 16px — body minimum, ALL inputs (iOS zoom) */ --vg-text-lg: 1.125rem; /* 18px — lead paragraphs */ --vg-text-xl: 1.375rem; /* 22px — card titles */ --vg-text-2xl: 1.75rem; /* 28px — subsection headings */ --vg-display-2: clamp(2rem, 4.2vw, 3.5rem); /* section titles */ --vg-display-1: clamp(2.75rem, 6vw, 5.25rem); /* hero only */ --vg-leading-display: 1.05; --vg-leading-heading: 1.15; --vg-leading-body: 1.6; --vg-leading-compact: 1.45; --vg-track-display: -0.045em; /* display-1 / display-2 only */ --vg-track-heading: -0.02em; /* xl / 2xl */ --vg-track-kicker: 0.14em; /* uppercase eyebrows */ /* ---- Spacing: 4px base -------------------------------------------------- */ --vg-space-1: 4px; --vg-space-2: 8px; --vg-space-3: 12px; --vg-space-4: 16px; --vg-space-5: 24px; --vg-space-6: 32px; --vg-space-7: 48px; --vg-space-8: 64px; --vg-space-9: 96px; --vg-section-y: clamp(76px, 8vw, 116px); /* standard section */ --vg-section-y-lg: clamp(90px, 10vw, 140px); /* final CTA band */ --vg-shell: min(1200px, calc(100% - 48px)); /* THE container */ /* ---- Radius ------------------------------------------------------------ The blob is the signature media frame. Three variants, no one-offs. */ --vg-radius-sm: 8px; --vg-radius-md: 14px; --vg-radius-lg: 22px; --vg-radius-pill: 999px; --vg-radius-blob: 24px 24px 90px 24px; --vg-radius-blob-flip: 24px 90px 24px 24px; --vg-radius-blob-sm: 16px 16px 44px 16px; /* ---- Elevation --------------------------------------------------------- One warm family. If the shadow is the first thing you notice, it is the wrong one. */ --vg-shadow-1: 0 10px 30px rgba(67, 48, 42, 0.06); /* resting card */ --vg-shadow-2: 0 18px 46px rgba(67, 48, 42, 0.08); /* raised card, nav */ --vg-shadow-3: 0 24px 60px rgba(67, 48, 42, 0.12); /* hover, overlay */ --vg-glow-primary: 0 14px 30px rgba(112, 28, 27, 0.2); --vg-halo-rings: 0 0 0 70px rgba(175, 45, 44, 0.025), 0 0 0 140px rgba(175, 45, 44, 0.018); /* ---- Motion ------------------------------------------------------------ Two hover lifts exist. There is no third. */ --vg-dur-fast: 180ms; --vg-dur-base: 240ms; --vg-dur-reveal: 650ms; --vg-ease: cubic-bezier(0.2, 0.7, 0.2, 1); --vg-lift-button: -2px; --vg-lift-card: -5px; /* ---- Breakpoints Deliberately NOT defined here. Breakpoints are repository-specific and this sheet does not make one repo's boundaries authoritative for the other. vigeo_health: guidance/DESIGN_TOOLKIT.md section 7 specifies 700 / 900 / 1199 / 1440, and review widths 1440, 1280, 1024, 768, 390. A new global breakpoint requires a documented reusable need. vigeo_pt: no equivalent document exists yet; the current boundaries live in the stylesheets. Establishing them is open work. (CSS cannot use custom properties in media queries in any case.) */ }