/* ============================================================ Balance Codex — Design Tokens ------------------------------------------------------------ Source of truth for colors, typography, spacing, and component-level values. Extracted from the Session 2 v3 calculator artifacts (May 2026). Structure: 1. Primitive color tokens (raw hex values) 2. Semantic color aliases (text-primary, surface-canvas, etc) 3. Typography (families, sizes, weights, tracking) 4. Spacing scale 5. Structural tokens (hairlines, strokes, radius) 6. Component-level tokens 7. Pyramid SVG tokens (locked from Session 1) When adding new components, reference SEMANTIC tokens (--text-primary) not primitives (--color-charcoal). Primitive layer exists so palette can shift without rewriting every consumer. ============================================================ */ /* ─── 1. Primitive Color Tokens ──────────────────────────── */ /* Raw palette. Do not reference these directly in components. */ /* Use the semantic aliases in section 2 instead. */ :root { /* Modern Editorial palette (July 2026 redesign). Primitive NAMES are kept from the first system so every semantic alias and every page stylesheet keeps resolving — only the VALUES move. charcoal now reads "ink", warm-white reads "paper". */ --color-charcoal: #1d2026; /* ink — primary */ --color-charcoal-soft: #666970; /* muted — secondary text */ --color-warm-white: #f7f4ec; /* paper — canvas */ --color-warm-cream: #efe9dd; /* paper-soft — elevated */ --color-warm-grey: #b6b3ab; /* hairlines on paper */ --color-warm-grey-light: #e2dfd6; /* subtle dividers */ --color-ink-blue: #344e6b; /* blue — system accent */ --color-white: #ffffff; /* on-accent text */ /* New primitives of the Modern Editorial system */ --color-card: #fffdf8; /* card / raised surface */ --color-blue-deep: #24384f; /* dark panels */ --color-blue-slate: #22364a; /* header button + footer */ --color-teal: #587b78; /* secondary accent */ --color-oxide: #b65f42; /* warm accent — hovers, underlines, highlights */ --line: rgba(29,32,38,.16); /* standard hairline */ --line-strong: rgba(29,32,38,.32); } /* ─── 2. Semantic Color Aliases ──────────────────────────── */ /* Use these in components. Each names a role, not a value. */ :root { /* Text */ --text-primary: var(--color-charcoal); --text-secondary: var(--color-charcoal-soft); --text-meta: var(--color-ink-blue); --text-on-accent: var(--color-white); /* Surface */ --surface-canvas: var(--color-warm-white); --surface-elevated: var(--color-warm-cream); /* Lines and structure */ --line-structural: var(--color-ink-blue); /* main hairlines */ --line-subtle: var(--color-warm-grey-light); /* card borders */ --line-pyramid: var(--color-warm-grey); /* SVG edges */ --line-node-stroke: var(--color-charcoal); /* SVG node circles */ /* Accent */ --accent-primary: var(--color-ink-blue); /* Interactive states */ --state-focus: var(--color-ink-blue); --state-error: var(--color-ink-blue); /* intentionally not red */ --state-disabled: var(--color-warm-grey); /* Overlays */ --overlay-modal: rgba(31, 29, 27, 0.5); /* charcoal at 50% */ } /* ─── 3. Typography ──────────────────────────────────────── */ /* Two families only: Sans for display + body, Mono for meta. */ /* Three-tier size scale: Display / Body / Caption. */ :root { /* Families */ /* Modern Editorial type: SYSTEM stacks only — zero webfont bytes, zero FOUT/CLS. Display voice is a book serif; body is Inter where installed, otherwise the platform grotesk; meta stays mono. */ --font-display: Georgia, 'Times New Roman', serif; --font-serif: var(--font-display); --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; /* v12: mono retired from the design language — meta text is the sans. */ --font-meta: var(--font-body); /* Size scale — three tiers */ /* Note: artifacts currently use intermediate sizes */ /* (10.5px, 11.5px, 14.5px, 17.5px). Future implementations */ /* should normalize to this scale. */ --text-display: 2.875rem; /* 46px — H1 only */ --text-body: 1.0625rem; /* 17px — paragraphs */ --text-body-sm: 1rem; /* 16px — secondary */ --text-caption: 0.8125rem; /* 13px — meta caps */ --text-caption-sm: 0.75rem; /* 12px — fine print */ /* Line heights */ --leading-display: 1.1; --leading-body: 1.6; --leading-caption: 1.4; /* Letter spacing */ --tracking-display: -0.02em; /* tight display */ --tracking-body: 0; --tracking-meta: 0.15em; /* mono caps spacing */ /* Weights */ --weight-regular: 400; --weight-medium: 500; /* display + emphasis */ } /* ─── 4. Spacing Scale ───────────────────────────────────── */ /* Use these instead of arbitrary px values. If a spec needs */ /* a value not on this scale, that's a sign to revisit. */ :root { --space-0: 0; --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: 2.5rem; /* 40px */ --space-8: 3rem; /* 48px */ --space-9: 4rem; /* 64px */ --space-10: 6rem; /* 96px — between major sections */ /* Semantic spacing aliases for clarity */ --space-section: var(--space-10); /* between major page sections */ --space-block: var(--space-6); /* between blocks inside a section */ --space-inline: var(--space-3); /* between elements in a row */ --space-tight: var(--space-2); /* label-to-field, etc */ } /* ─── 5. Structural Tokens ───────────────────────────────── */ :root { --hairline: 1px; --stroke-strong: 1.2px; --radius: 0; /* Square everywhere. */ /* This is a design */ /* decision: no */ /* rounded corners on */ /* cards, buttons, */ /* fields, modals. */ } /* ─── 6. Component Tokens ────────────────────────────────── */ :root { /* Primary button (CALCULATE and other primary CTAs) */ --button-primary-bg: var(--accent-primary); --button-primary-text: var(--text-on-accent); --button-primary-font: var(--font-meta); --button-primary-size: var(--text-caption); --button-primary-tracking: var(--tracking-meta); --button-primary-padding-y: var(--space-4); --button-primary-padding-x: var(--space-6); --button-primary-radius: var(--radius); /* Secondary button (TRY AGAIN) */ --button-secondary-bg: var(--surface-elevated); --button-secondary-text: var(--text-meta); --button-secondary-border: var(--hairline) solid var(--accent-primary); /* Input field (underline style — no full border) */ --input-bg: transparent; --input-border-bottom: var(--hairline) solid var(--color-warm-grey); --input-border-bottom-focus: var(--hairline) solid var(--accent-primary); --input-border-bottom-error: var(--stroke-strong) solid var(--accent-primary); --input-padding-y: var(--space-3); --input-label-font: var(--font-meta); --input-label-size: var(--text-caption); --input-label-tracking: var(--tracking-meta); /* Gender selector (segmented toggle) */ --selector-selected-bg: var(--accent-primary); --selector-selected-text: var(--text-on-accent); --selector-unselected-bg: var(--surface-canvas); --selector-unselected-text: var(--text-meta); --selector-border: var(--hairline) solid var(--accent-primary); /* Modal */ --modal-bg: var(--surface-canvas); --modal-border: var(--hairline) solid var(--accent-primary); --modal-overlay: var(--overlay-modal); --modal-width-desktop: 560px; --modal-padding: var(--space-6); /* Card (PDF panel, Success exploration cards) */ --card-bg: var(--surface-elevated); --card-padding: var(--space-6); --card-radius: var(--radius); /* Hairline divider rules between sections */ --divider: var(--hairline) solid var(--line-structural); --divider-subtle: var(--hairline) solid var(--line-subtle); /* Meta label (STEP 01, CALCULATED, INNER AXIS, etc) */ --meta-label-font: var(--font-meta); --meta-label-size: var(--text-caption); --meta-label-color: var(--text-meta); --meta-label-tracking: var(--tracking-meta); --meta-label-transform: uppercase; /* Navigation link (navbar links: METHOD, AUTHOR, PHILOSOPHY) */ /* Mono caps but with COMPACT tracking — distinct from meta */ /* labels which use wider tracking. Reads as tight nav group, */ /* not as ceremonial label. */ --nav-link-font: var(--font-meta); --nav-link-size: 0.8125rem; /* 13px (bumped from 12px, v2.0.7) */ --nav-link-color: var(--text-meta); --nav-link-tracking: 0.08em; /* compact */ --nav-link-transform: uppercase; --nav-link-gap: var(--space-5); /* ~24px between links */ /* Footer link (column lists in footer) */ /* Same family as nav-link but even more compact for dense */ /* multi-column footer layout */ --footer-link-font: var(--font-meta); --footer-link-size: 0.8125rem; /* 13px (bumped from 11px, v2.0.7) */ --footer-link-color: var(--text-meta); --footer-link-tracking: 0.07em; --footer-link-transform: uppercase; --footer-link-line-height: 1.6; /* Footer column header (METHOD / ABOUT / READ headers) */ /* Different color than the links beneath — charcoal weight */ /* signals "this is a category" vs "these are items" */ --footer-header-font: var(--font-meta); --footer-header-size: 0.875rem; /* 14px (bumped from 12px, v2.0.7) */ --footer-header-color: var(--text-primary); /* charcoal, NOT ink-blue */ --footer-header-tracking: 0.08em; --footer-header-transform: uppercase; /* Legal strip (Privacy / Terms / Refund) — quietest layer */ --legal-link-font: var(--font-meta); --legal-link-size: 0.6875rem; /* 11px (v2.0.8: dialed back from 12px) */ --legal-link-color: var(--text-secondary); --legal-link-tracking: 0.08em; --legal-link-transform: uppercase; /* CTA semantic distinction — two intent types */ /* Both use the same visual style; the TEXT distinguishes them */ /* CTA A: methodological entry (used in hero + navbar) */ /* Text: "CALCULATE YOUR BALANCE PYRAMID →" */ /* CTA B: commercial conversion (used in product blocks) */ /* Text: "GET YOUR FULL READING →" */ /* Do NOT introduce a third primary CTA variant. Two intents, */ /* two phrases — no synonyms, no alternatives. */ } /* ─── 7. Pyramid SVG Tokens (locked from Session 1) ──────── */ /* These values are part of Direction 01, the canonical */ /* pyramid rendering. Do not modify unless redoing Session 1. */ :root { --pyramid-viewbox: 0 0 1600 960; --pyramid-node-radius: 28; /* SVG circle r */ --pyramid-node-fill: var(--surface-canvas); --pyramid-node-stroke: var(--line-node-stroke); --pyramid-node-stroke-width: 1.2; /* SVG units */ --pyramid-line-stroke: var(--line-pyramid); --pyramid-line-stroke-width: 1; /* SVG units */ --pyramid-numeral-font: var(--font-display); --pyramid-numeral-weight: 500; --pyramid-numeral-size-1d: 30px; /* single-digit nodes */ --pyramid-numeral-size-2d: 28px; /* two-digit nodes */ --pyramid-numeral-fill: var(--text-primary); } /* ─── 8. Layout / Shell (added during implementation) ────── */ /* These tokens were not in the v3 design-tokens file but are */ /* required to express the page chrome (navbar, footer, */ /* page containers) without hard-coded values. */ /* */ /* Container width is bounded so that long-form text remains */ /* readable; horizontal padding scales between mobile and */ /* desktop. Navbar height is consistent across both modes. */ /* */ /* If these values diverge from design intent, adjust here — */ /* not in chrome.css. Component CSS must continue to reference */ /* tokens, never raw px. */ :root { /* Page container */ --container-max: 1280px; --container-pad-mobile: var(--space-5); /* 24px each side */ --container-pad-desktop: var(--space-7); /* 40px each side */ /* Navbar */ --navbar-height: 4.5rem; /* 72px */ --navbar-height-mobile: 4rem; /* 64px */ --navbar-border-bottom: var(--hairline) solid var(--line-structural); --navbar-bg: var(--surface-canvas); /* Z-index scale */ --z-navbar: 100; --z-modal-overlay: 900; --z-modal: 1000; --z-pyramid-updated-pill: 1100; /* Breakpoint reference (CSS variables can't be used in @media */ /* directly — these are documented values to keep in sync with */ /* @media queries throughout the codebase). */ /* mobile < 768px */ /* tablet >= 768px */ /* desktop >= 1024px */ } /* ============================================================ 8. Prototype aliases (Modern Editorial, v12) ------------------------------------------------------------ The approved prototypes speak in these names. Aliasing them to the primitives means prototype markup and CSS port verbatim — no variable translation, no translation bugs. ============================================================ */ :root { --paper: var(--color-warm-white); --paper-soft: var(--color-warm-cream); --white: var(--color-card); --ink: var(--color-charcoal); --muted: var(--color-charcoal-soft); --blue: var(--color-ink-blue); --blue-deep: var(--color-blue-deep); --teal: var(--color-teal); --oxide: var(--color-oxide); --serif: var(--font-serif); --sans: var(--font-body); --max: 1420px; } /* ============================================================ 9. Type scale (Typography system v1 — two families, seven levels) ============================================================ */ :root { --type-label: 12px; --type-small: 14px; --type-body: clamp(16px, 1.05vw, 17px); --type-lead: clamp(18px, 1.35vw, 20px); --type-card: 32px; --type-section: clamp(44px, 4.6vw, 68px); --type-display: clamp(56px, 6vw, 92px); } @media (max-width: 760px) { :root { --type-body: 16px; --type-lead: 18px; --type-card: 28px; --type-section: 42px; --type-display: 50px; } } /* ─── §10. ПОЛУТОНА (2.18.1) ─────────────────────────────────── Аудит нашёл в правилах 31 сырой цвет вне палитры — только светло-синих было девятнадцать, различимых на 1–2 %. Причина: теме не хватало производных тонов, и каждая страница изобретала свои. Теперь они здесь, и это единственный их источник. */ :root{ --blue-wash: #edf1f5; /* светлая подложка карточек */ --blue-tint: #dce5eb; /* подложка потемнее */ --blue-line: #c7d2dc; /* линия на синем */ --blue-line-strong: #b9c8d5; /* линия контрастнее */ --blue-muted: #839db9; /* приглушённый текст на синем */ --teal-wash: #eaf0ed; /* светлая подложка бирюзы */ --teal-light: #688d89; /* бирюза светлее основной */ --oxide-wash: #f6ebe5; /* светлая подложка оксида */ --oxide-light: #f0b39e; /* оксид светлее основного */ --sand: #cfc7ba; /* песочная линия (эссе, блог) */ --sand-deep: #a98167; /* песочный акцент (фазы) */ --on-dark: rgba(255,255,255,.90); --on-dark-soft: rgba(255,255,255,.72); --on-dark-line: rgba(255,255,255,.24); --on-dark-faint: rgba(255,255,255,.12); --blue-slate: var(--color-blue-slate); --angle: 0deg; /* дизайнеры использовали, но не объявляли */ --angle-neg: 0deg; --line-faint: rgba(29,32,38,.08); --veil-paper: rgba(247,244,236,.92); --veil-white: rgba(255,253,248,.94); }