/* * ════════════════════════════════════════════════════════════════ * FUTUREBRAINING · DESIGN SYSTEM v2 · DESIGN TOKENS * tokens.css · v2.0.0-pilot · June 2026 * * Drop-in CSS custom properties for the v2 visual system. * Loaded AFTER /v2/fonts.css and BEFORE /v2/brand.css. * * Scope: this file targets :root, but only mutates properties * that v1 surfaces don't depend on. v1 brand.css is unaffected. * If you need both systems on the same page, wrap the v2 * section in `.v2-root` instead. * * Contents: * 1. Brand colors (preserved from v1) * 2. Surface colors (evolved — cream paper) * 3. Brain accent (NEW — sage) * 4. Semantic palette (preserved from v1) * 5. Foreground / ink (calibrated for cream background) * 6. Typography * 7. Spacing * 8. Radii * 9. Shadows * 10. Transitions * 11. Layout * ════════════════════════════════════════════════════════════════ */ :root, .v2-root { /* ── 1. BRAND COLORS — preserved from v1 ───────────────── */ --v2-brand-purple: #483778; /* primary interactive + CTAs */ --v2-brand-purple-hover: #5a4592; --v2-brand-pink: #FF7FE8; /* the "ai" callout · accent */ --v2-brand-dark: #231B3B; /* legacy dark surface — used sparingly */ --v2-brand-light-purple: #6F658C; --v2-brand-grey-purple: #C7C1D9; /* ── 2. SURFACE COLORS — evolved ──────────────────────── */ --v2-paper: #F1EFE7; /* primary page background — cream */ --v2-paper-soft: #E9E5D6; /* slightly deeper cream — strips, foots */ --v2-paper-white: #FFFFFF; /* cards, dialog surfaces */ --v2-paper-edge: rgba(30, 27, 46, 0.08); /* hairline rules */ --v2-paper-edge-dashed: rgba(30, 27, 46, 0.12); /* ── 3. BRAIN ACCENT — NEW ────────────────────────────── */ --v2-sage: #6C8F5E; /* primary brain accent */ --v2-sage-deep: #3F5E36; /* deeper for type on light */ --v2-sage-tint: rgba(108, 143, 94, 0.10); --v2-sage-tint-strong: rgba(108, 143, 94, 0.18); /* ── 4. SEMANTIC PALETTE — preserved from v1 ──────────── */ --v2-red: #E8443A; /* HIGH impact · L0–L1 · Limiting */ --v2-amber: #E8922A; /* MEDIUM · L2 · Mixed */ --v2-green: #22C55E; /* LOW · L3 · Enabling */ --v2-red-tint: rgba(232, 68, 58, 0.06); --v2-amber-tint: rgba(232, 146, 42, 0.06); --v2-green-tint: rgba(34, 197, 94, 0.06); /* ── 5. INK / FOREGROUND — calibrated for cream ──────── */ --v2-ink: #1E1B2E; /* primary text on paper */ --v2-ink-soft: #5B5870; /* secondary text, captions */ --v2-ink-faint: rgba(30, 27, 46, 0.40); --v2-ink-on-purple: #FFFFFF; --v2-ink-on-sage: #FFFFFF; /* ── 6. TYPOGRAPHY ────────────────────────────────────── */ /* Family — three voices + a field label */ --v2-font-display: 'Archivo Black', sans-serif; --v2-font-headline: 'Crimson Pro', Georgia, serif; --v2-font-ui: 'Poppins', system-ui, sans-serif; --v2-font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; /* Scale — display (Archivo Black, manifesto only) */ --v2-size-display-xl: 132px; /* hero on widest viewports — Stay sharp. */ --v2-size-display-lg: 88px; --v2-size-display: 64px; /* secondary manifesto headlines */ --v2-size-display-sm: 44px; /* compact hero / card titles */ /* Scale — conversational (Crimson Pro italic) */ --v2-size-prompt-lg: 42px; /* survey question prompts */ --v2-size-prompt: 38px; --v2-size-prompt-sm: 28px; --v2-size-lede: 22px; /* entry sub-paragraphs */ --v2-size-observation: 17px; /* observation cards */ /* Scale — UI (Poppins) */ --v2-size-h1: 48px; --v2-size-h2: 32px; --v2-size-h3: 22px; --v2-size-body: 15px; --v2-size-body-sm: 13.5px; --v2-size-caption: 12px; --v2-size-eyebrow: 11px; /* Scale — field labels (JetBrains Mono) */ --v2-size-field: 10.5px; --v2-size-field-lg: 12px; /* Letter spacing */ --v2-tracking-tight: -0.045em; /* Archivo Black · @kind font */ --v2-tracking-snug: -0.027em; /* Poppins headings · @kind font */ --v2-tracking-normal: 0; /* @kind font */ --v2-tracking-narrow: 0.06em; /* @kind font */ --v2-tracking-wide: 0.14em; /* JetBrains Mono caps · @kind font */ --v2-tracking-widest: 0.16em; /* eyebrows, figure numbers · @kind font */ /* Line heights */ --v2-leading-tight: 0.92; /* @kind font */ --v2-leading-snug: 1.05; /* @kind font */ --v2-leading-base: 1.4; /* @kind font */ --v2-leading-relaxed: 1.55; /* @kind font */ --v2-leading-loose: 1.7; /* @kind font */ /* Weights */ --v2-fw-regular: 400; /* @kind font */ --v2-fw-medium: 500; /* @kind font */ --v2-fw-semibold: 600; /* @kind font */ --v2-fw-bold: 700; /* @kind font */ --v2-fw-extrabold: 800; /* @kind font */ /* ── 7. SPACING ──────────────────────────────────────── */ --v2-space-1: 4px; --v2-space-2: 8px; --v2-space-3: 12px; --v2-space-4: 16px; --v2-space-5: 20px; --v2-space-6: 24px; --v2-space-7: 28px; --v2-space-8: 32px; --v2-space-10: 40px; --v2-space-12: 48px; --v2-space-14: 56px; --v2-space-16: 64px; --v2-space-20: 80px; --v2-space-24: 96px; /* ── 8. RADII ────────────────────────────────────────── */ --v2-radius-sm: 4px; /* badges, field tags */ --v2-radius: 6px; /* form fields, small cards */ --v2-radius-md: 8px; /* buttons, scale options */ --v2-radius-lg: 12px; /* cards, observation panels */ --v2-radius-xl: 16px; /* hero containers */ --v2-radius-pill: 999px; /* the CTA */ /* ── 9. SHADOWS ──────────────────────────────────────── */ --v2-shadow-card: 0 2px 12px rgba(30, 27, 46, 0.06); --v2-shadow-hover: 0 6px 20px rgba(30, 27, 46, 0.10); --v2-shadow-cta: 0 8px 20px -10px rgba(72, 55, 120, 0.60); --v2-shadow-cta-h: 0 12px 28px -10px rgba(72, 55, 120, 0.80); --v2-shadow-select: 0 4px 0 -2px var(--v2-sage), 0 12px 32px -16px rgba(108, 143, 94, 0.40); /* ── 10. TRANSITIONS ─────────────────────────────────── */ --v2-t-fast: 120ms ease; /* @kind other */ --v2-t-base: 160ms ease; /* @kind other */ --v2-t-screen: 280ms ease; /* @kind other */ --v2-t-progress: 450ms cubic-bezier(.4, 0, .2, 1); /* @kind other */ /* ── 11. LAYOUT ──────────────────────────────────────── */ --v2-max-report: 780px; /* @kind spacing */ --v2-max-section: 1180px; /* @kind spacing */ --v2-max-survey: 720px; /* @kind spacing */ --v2-max-prose: 640px; /* @kind spacing */ }