/* ============================================================================ tokens.css — V3 design tokens ---------------------------------------------------------------------------- V3 uses a light editorial chassis deliberately different from V1's dark/ brand-first palette. The Prospero brand red (#E42C2F) appears only on primary CTAs. Per-persona accents are applied exclusively to eyebrow labels, link tints inside persona sections, and thin vertical rules — never as section backgrounds or primary colour fills. ============================================================================ */ :root { /* ---- V3 Surface palette ------------------------------------------------ Warm near-white chassis. Different from V1's paper/ink inversion. */ --color-bg: #fafaf9; /* primary page surface */ --color-bg-alt: #f0eeeb; /* alternate section tint */ --color-bg-dark: #111111; /* dark sections (footer, final CTA) */ --color-ink: #111111; /* primary text */ --color-ink-muted: #555350; /* secondary text, body */ --color-ink-quiet: #8b8985; /* meta, captions, labels */ --color-border: #d8d6d2; /* hairline rules */ --color-border-strong: #b0ada8; /* stronger dividers */ /* Semantic aliases */ --color-fg: var(--color-ink); --color-fg-muted: var(--color-ink-muted); --color-fg-quiet: var(--color-ink-quiet); --color-paper: var(--color-bg); --color-paper-soft: var(--color-bg-alt); /* ---- Brand accent — CTAs ONLY ----------------------------------------- #E42C2F appears on primary button backgrounds, focus rings, and selection. Not used as a section colour or decorative element. */ --color-accent: #E42C2F; --color-accent-hover: #c0262a; --color-accent-soft: rgba(228, 44, 47, 0.08); --color-accent-ink: #ffffff; /* ---- Per-persona accents ----------------------------------------------- Used ONLY for: eyebrow labels, link tint within persona sections, 3px vertical rule on section markers, scroll progress bar background. NEVER: section backgrounds, heading colour, button backgrounds. */ --color-persona-compliance: #17365d; /* deep banker blue */ --color-persona-risk: #b05a3b; /* terracotta */ --color-persona-evaluation: #3c3f4a; /* graphite */ /* Active persona (set via data attribute on ) */ --color-persona-active: var(--color-ink-quiet); /* neutral default */ /* ---- Status colours ---------------------------------------------------- */ --color-success: #157f3c; --color-warning: #b46a00; --color-danger: #b42318; /* ---- Typography -------------------------------------------------------- Messina Sans (Prospero brand typeface, commercial license, self-hosted). All weights use TTF files copied from V1. */ --font-sans: "Messina Sans", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Fluid type scale — 360px → 1280px viewport. Base 16px → 17px. Ratio ~1.2 (minor third). */ --step--1: clamp(0.813rem, 0.78rem + 0.12vw, 0.875rem); /* 13 → 14 */ --step-0: clamp(1rem, 0.96rem + 0.15vw, 1.0625rem); /* 16 → 17 */ --step-1: clamp(1.125rem, 1.07rem + 0.24vw, 1.25rem); /* 18 → 20 */ --step-2: clamp(1.25rem, 1.17rem + 0.36vw, 1.5rem); /* 20 → 24 */ --step-3: clamp(1.5rem, 1.36rem + 0.59vw, 1.875rem); /* 24 → 30 */ --step-4: clamp(1.875rem, 1.64rem + 1.02vw, 2.5rem); /* 30 → 40 */ --step-5: clamp(2.25rem, 1.88rem + 1.63vw, 3.25rem); /* 36 → 52 */ --step-6: clamp(2.75rem, 2.16rem + 2.61vw, 4.375rem); /* 44 → 70 */ /* Extra display step for stat-as-image treatment (clamped at mobile) */ --step-7: clamp(3.5rem, 4vw + 1.5rem, 7rem); /* 56 → 112 */ --line-height-tight: 1.15; --line-height-snug: 1.3; --line-height-normal: 1.6; --line-height-loose: 1.8; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semi: 600; --font-weight-bold: 700; /* ---- Spacing scale — 4px grid ----------------------------------------- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ --space-9: 6rem; /* 96px */ --space-10: 8rem; /* 128px */ /* Section vertical rhythm */ --section-py: clamp(4rem, 6vw + 1rem, 7rem); --section-py-large: clamp(5rem, 8vw + 1rem, 9rem); --section-py-tight: clamp(2rem, 3vw + 0.5rem, 3.5rem); /* ---- Layout ------------------------------------------------------------ */ --container-max: 78.125rem; /* 1250px */ --container-wide: 93.75rem; /* 1500px */ --container-measure: 68ch; /* long-form reading width */ --container-prose: 62ch; /* tight narrative prose */ --gutter: clamp(1.25rem, 4vw, 3rem); /* ---- Radii ------------------------------------------------------------ */ --radius-1: 0.25rem; /* 4px — inputs, small elements */ --radius-2: 0.5rem; /* 8px — cards */ --radius-3: 0.75rem; /* 12px */ --radius-pill: 999px; /* buttons, tags */ /* ---- Shadows ---------------------------------------------------------- */ --shadow-1: 0 1px 2px rgba(17, 17, 17, 0.04); --shadow-2: 0 2px 8px rgba(17, 17, 17, 0.06), 0 1px 2px rgba(17, 17, 17, 0.04); --shadow-3: 0 8px 28px rgba(17, 17, 17, 0.08), 0 2px 8px rgba(17, 17, 17, 0.05); --shadow-focus: 0 0 0 3px rgba(228, 44, 47, 0.3); /* ---- Motion ----------------------------------------------------------- */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --duration-fast: 150ms; --duration-med: 250ms; --duration-slow: 400ms; /* ---- Header ----------------------------------------------------------- */ --header-height: 4rem; --header-height-lg: 4.5rem; --persona-tab-height: 2.75rem; /* ---- Scroll progress bar ---------------------------------------------- */ --scroll-progress-height: 3px; --scroll-progress-pct: 0%; /* updated by scroll-progress.js */ /* ---- Z-index ---------------------------------------------------------- */ --z-progress: 50; --z-sticky: 200; --z-overlay: 900; --z-modal: 1000; }