/* =========================================== ESVERO · BRAND TOKENS · v1.0 =========================================== Concept C · Converge SOLID 2026-05-02 · approved 9.16/10 panel =========================================== */ :root { /* ─── PALETTE · CORE ───────────────────── */ --esv-ink: #000000; /* pure black — primary text + lines */ --esv-ink-2: #0A0A0A; /* dark elevation */ --esv-line-dark: #1F1F1F; /* dark mode line */ --esv-paper: #F8F6F1; /* bone — primary background */ --esv-paper-2: #EFEDE6; /* paper elevation */ --esv-paper-3: #DDD8CC; /* line on paper */ --esv-graphite: #404040; /* secondary text dark */ --esv-muted: #525252; /* muted text — 7.49 AAA over paper */ --esv-ash: #8C8C8C; /* helper text dark */ /* ─── PALETTE · TRUTH ──────────────────── */ --esv-truth: #B91C1C; /* truth red — graphic ONLY (truth-dot, accents) */ --esv-truth-deep: #7F1D1D; /* truth deep — solid emphasis */ --esv-truth-text: #991B1B; /* truth in text — 7.96 AAA over paper */ /* ─── PALETTE · STATUS (semantic, not brand) ─ */ --esv-pos: #166534; /* success / attested */ --esv-warn: #854D0E; /* warning */ --esv-neg: #991B1B; /* error — same as truth-text */ /* ─── TYPOGRAPHY ─────────────────────────── */ --esv-font-display: 'Inter Tight', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --esv-font-body: 'Inter Tight', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --esv-font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; /* font scale — modular 1.25 (fourth) */ --esv-fs-mono-xs: 10px; --esv-fs-mono-sm: 11px; --esv-fs-mono-md: 12px; --esv-fs-xs: 13px; --esv-fs-sm: 14px; --esv-fs-base: 16px; --esv-fs-lg: 18px; --esv-fs-xl: 20px; --esv-fs-2xl: 24px; --esv-fs-3xl: 32px; --esv-fs-4xl: 40px; --esv-fs-5xl: 56px; --esv-fs-6xl: 72px; --esv-fs-7xl: 96px; --esv-fs-8xl: 128px; /* font weights — only 4 used */ --esv-fw-regular: 400; --esv-fw-medium: 500; --esv-fw-bold: 700; --esv-fw-black: 800; /* tracking */ --esv-track-tight: -0.04em; --esv-track-normal: 0; --esv-track-mono: 0.15em; --esv-track-loose: 0.25em; /* line heights */ --esv-lh-display: 0.95; --esv-lh-tight: 1.1; --esv-lh-snug: 1.3; --esv-lh-normal: 1.5; --esv-lh-loose: 1.7; /* ─── SPACING ────────────────────────────── */ --esv-sp-1: 4px; --esv-sp-2: 8px; --esv-sp-3: 12px; --esv-sp-4: 16px; --esv-sp-5: 20px; --esv-sp-6: 24px; --esv-sp-8: 32px; --esv-sp-10: 40px; --esv-sp-12: 48px; --esv-sp-16: 64px; --esv-sp-20: 80px; --esv-sp-24: 96px; --esv-sp-32: 128px; /* ─── BORDER RADII ───────────────────────── */ --esv-radius-none: 0; /* default — Bauhaus discipline */ --esv-radius-sm: 2px; --esv-radius-md: 4px; --esv-radius-lg: 8px; --esv-radius-pill: 999px; /* ─── BORDER WIDTHS ──────────────────────── */ --esv-border-thin: 1px; --esv-border-md: 2px; --esv-border-thick: 3px; /* ─── SHADOWS ────────────────────────────── */ --esv-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --esv-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --esv-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12); /* ─── SYMBOL · STROKE SCALE ──────────────── */ /* canonical stroke widths for the converge symbol per size */ --esv-symbol-stroke-xl: 3px; /* ≥240px container */ --esv-symbol-stroke-lg: 12px; /* 96-240px */ --esv-symbol-stroke-md: 22px; /* 48-96px */ --esv-symbol-stroke-sm: 32px; /* 32-48px */ --esv-symbol-stroke-xs: 42px; /* ≤32px */ /* below 16px: collapse to truth-dot only (favicon-strategy.md) */ /* ─── MOTION ─────────────────────────────── */ --esv-ease: cubic-bezier(0.4, 0, 0.2, 1); --esv-ease-in: cubic-bezier(0.4, 0, 1, 1); --esv-ease-out: cubic-bezier(0, 0, 0.2, 1); --esv-dur-fast: 150ms; --esv-dur-normal: 250ms; --esv-dur-slow: 400ms; --esv-dur-pulse: 1500ms; /* ─── SEMANTIC · LIGHT MODE (default) ────── */ --esv-bg: var(--esv-paper); --esv-bg-elev: var(--esv-paper-2); --esv-fg: var(--esv-ink); --esv-fg-muted: var(--esv-muted); --esv-fg-subtle: var(--esv-ash); --esv-line: var(--esv-paper-3); --esv-accent: var(--esv-truth); --esv-accent-text: var(--esv-truth-text); } /* ─── SEMANTIC · DARK MODE ──────────────────── */ [data-theme="dark"], @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --esv-bg: var(--esv-ink); --esv-bg-elev: var(--esv-ink-2); --esv-fg: var(--esv-paper); --esv-fg-muted: var(--esv-ash); --esv-fg-subtle: var(--esv-graphite); --esv-line: var(--esv-line-dark); --esv-accent: var(--esv-truth); --esv-accent-text: var(--esv-truth); } } /* ─── BASE RESET ────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-family: var(--esv-font-body); font-size: var(--esv-fs-base); line-height: var(--esv-lh-normal); background: var(--esv-bg); color: var(--esv-fg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ─── TYPOGRAPHY UTILITIES ──────────────────── */ .esv-h1 { font-family: var(--esv-font-display); font-weight: var(--esv-fw-black); font-size: var(--esv-fs-7xl); letter-spacing: var(--esv-track-tight); line-height: var(--esv-lh-display); } .esv-h2 { font-family: var(--esv-font-display); font-weight: var(--esv-fw-bold); font-size: var(--esv-fs-5xl); letter-spacing: var(--esv-track-tight); line-height: var(--esv-lh-tight); } .esv-h3 { font-family: var(--esv-font-display); font-weight: var(--esv-fw-bold); font-size: var(--esv-fs-3xl); letter-spacing: var(--esv-track-tight); line-height: var(--esv-lh-tight); } .esv-mono { font-family: var(--esv-font-mono); font-size: var(--esv-fs-mono-sm); letter-spacing: var(--esv-track-loose); text-transform: uppercase; color: var(--esv-fg-muted); } .esv-truth-em { color: var(--esv-accent); font-style: normal; } /* ─── WORDMARK · "esvero." ──────────────────── */ .esv-wordmark { font-family: var(--esv-font-display); font-weight: var(--esv-fw-bold); letter-spacing: -0.04em; color: var(--esv-fg); } .esv-wordmark .esv-dot { color: var(--esv-accent); }