/* CONFIDENTIAL — TRADE SECRET. Property of STRVue LLC. Unauthorized use, reproduction, or distribution is prohibited. */ /* ══════════════════════════════════════════════════════════════ STRVue Design Tokens — Editorial Re-skin Single source of truth. PRINCIPLES: - Numbers create hierarchy, not borders - Spacing separates, not boxes - Color is functional, never decorative - Flat > floating. Borders only where structure requires them. - Editorial: serif voice for display, ledger mono for labels, ivory paper background, ink + bronze accent. COMPATIBILITY: This file remaps the existing --color-*, --c-*, --font-*, etc. token names to the new editorial palette so existing templates pick up the redesign without markup changes. ══════════════════════════════════════════════════════════════ */ :root { /* ══════════════════════════════════════════════════════════ NEW EDITORIAL TOKENS (preferred — use these in new code) ══════════════════════════════════════════════════════════ */ /* Surfaces */ --ivory: #FBF8F1; /* page background */ --paper: #F5F0E4; /* cards, panels */ --paper-deep: #EFE8D5; /* recessed surfaces */ /* Ink */ --ink: #141413; /* primary text, brand */ --ink-soft: #2A2925; /* secondary text */ --ink-mute: #74706A; /* tertiary, captions */ /* Bronze accent */ --bronze: #AC8444; /* accent */ --bronze-deep: #8A6A36; /* hover, active */ --bronze-wash: #F0E8D4; /* tint background */ --bronze-muted: rgba(172, 132, 68, 0.10); /* Rules */ --rule: #E6DEC9; /* default hairline */ --rule-hair: #EFE9D9; /* table-row dividers */ --rule-strong: #D5CAA8; /* emphasis */ /* Semantic */ --positive: #2E6F40; --positive-bg: #ECF3EE; --negative: #B23A3A; --negative-bg: #F7ECEC; --ember: #CC5500; --warning-bg: #FBF1E6; /* Type families */ --f-display: "Fraunces", Georgia, "Times New Roman", serif; --f-body: "Source Serif 4", Georgia, "Times New Roman", serif; --f-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --f-mono: "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* ══════════════════════════════════════════════════════════ COMPATIBILITY LAYER — existing token names remapped Templates use these; do NOT remove. They alias the new editorial values so the re-skin propagates automatically. ══════════════════════════════════════════════════════════ */ /* Phase 8 spec tokens — used heavily by operator templates */ --color-navy: var(--ink); --color-navy-deep: #000; --color-gold: var(--bronze); --color-bg: var(--ivory); /* operator page bg */ --color-bg-app: var(--ivory); --color-bg-public: var(--ivory); --color-surface: var(--paper); --color-divider: var(--rule); --color-border: var(--rule); --color-text: var(--ink); --color-text-secondary: var(--ink-soft); --color-text-muted: var(--ink-mute); --color-positive: var(--positive); --color-positive-bg: var(--positive-bg); --color-negative: var(--negative); --color-negative-bg: var(--negative-bg); --color-warning: var(--ember); --color-warning-bg: var(--warning-bg); --font-ui: var(--f-ui); --font-wordmark: var(--f-display); /* Public-page legacy aliases (used by public.css) */ --c-navy: var(--ink); --c-navy-light: var(--ink-soft); --c-navy-muted: rgba(20, 20, 19, 0.06); --c-gold: var(--bronze); --c-gold-muted: var(--bronze-muted); --c-bg: var(--ivory); --c-surface: var(--paper); --c-border: var(--rule); --c-border-strong: var(--rule-strong); --c-divider: var(--rule-hair); --c-text: var(--ink); --c-text-secondary: var(--ink-soft); --c-text-muted: var(--ink-mute); --c-text-inverse: var(--ivory); --c-positive: var(--positive); --c-positive-bg: var(--positive-bg); --c-negative: var(--negative); --c-negative-bg: var(--negative-bg); --c-warning: var(--ember); --c-warning-bg: var(--warning-bg); --c-warning-border: rgba(204, 85, 0, 0.2); --c-info: var(--bronze-deep); --c-info-bg: var(--bronze-wash); /* Legacy font name */ --font-family: var(--f-ui); --f-editorial: var(--f-body); /* italic serif voice used in pricing.html */ /* ══════════════════════════════════════════════════════════ SHARED SCALES (untouched — these were already good) ══════════════════════════════════════════════════════════ */ --fs-display-lg: 2rem; /* 32px */ --fs-display: 1.5rem; /* 24px */ --fs-h1: 1.125rem; /* 18px */ --fs-h2: 0.9375rem; /* 15px */ --fs-h3: 0.8125rem; /* 13px */ --fs-body: 0.8125rem; /* 13px */ --fs-body-sm: 0.75rem; /* 12px */ --fs-label: 0.6875rem; /* 11px */ --fs-caption: 0.625rem; /* 10px */ --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.2; --lh-normal: 1.5; --lh-relaxed: 1.6; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* Tighter radii — editorial, not SaaS */ --radius-sm: 2px; --radius: 3px; --radius-lg: 4px; --radius-pill: 9999px; --radius-card: 4px; --radius-card-lg: 6px; --radius-button: 3px; /* Barely-there shadows */ --shadow-sm: 0 1px 2px rgba(20, 20, 19, 0.03); --shadow: 0 1px 3px rgba(20, 20, 19, 0.04); --shadow-md: 0 2px 8px rgba(20, 20, 19, 0.06); --shadow-card: 0 1px 3px rgba(20, 20, 19, 0.05); --sidebar-width: 220px; --rail-width: 52px; --topbar-height: 56px; --content-max: 1100px; --content-padding: var(--sp-6); --opacity-dimmed: 0.38; /* Marketing scale */ --fs-hero: 3.5rem; --fs-hero-sm: 2.5rem; --fs-marketing-h2: 2rem; --fs-marketing-body: 1.125rem; --fs-marketing-sm: 1rem; --sp-section: 2.5rem; --sp-section-lg: 3.25rem; --ease: 0.15s ease; /* Breakpoints — documentation only; CSS custom properties cannot be used inside @media (max-width: ...) queries in the standard spec. Use these values as the canonical reference when writing media queries. */ --bp-mobile: 480px; --bp-tablet: 768px; --bp-desktop: 1024px; }