/* ───────────────────────────────────────────────────────────── Vostego Refined Design System — Shared Tokens Source: handoff bundle "Vostego Refined Systems" (2026-05-18) ───────────────────────────────────────────────────────────── Three themes share one token vocabulary: • (default) Warm — ink var(--ink-0), brand purple #5560d0, clay var(--clay) • Editorial — navy #232946, periwinkle #b8c1ec, dusty rose #d99aa3 • Dark — deep-navy paper #0f1320, periwinkle, lifted rose Theme switching: set [data-theme="editorial"] or [data-theme="dark"] on (or ). Default = warm. Surface scopes (.coach-surface, .cms-surface, .admin-surface) override a smaller set of tokens for component-local styling. ───────────────────────────────────────────────────────────── */ :root { /* Paper & Ink — warmer than current text-primary, richer paper */ --paper-0: var(--paper-0); /* warm off-white */ --paper-1: var(--paper-1); /* surface alt */ --paper-2: var(--paper-2); /* divider */ --ink-0: var(--ink-0); /* deep ink for headings */ --ink-1: var(--ink-1); /* body */ --ink-2: var(--ink-2); /* secondary */ --ink-3: var(--ink-3); /* tertiary */ --ink-4: var(--ink-4); /* placeholder */ /* Brand — tightened triad */ --brand: var(--brand); --brand-soft: var(--brand-soft); --brand-deep: var(--brand-deep); --sage: var(--sage); --sage-soft: var(--sage-soft); --clay: var(--clay); /* accent */ --clay-soft: var(--clay-soft); --clay-strong: var(--clay-strong); --clay-deep: var(--clay-deep); /* Support triad */ --gold: var(--gold); /* warning */ --gold-soft: var(--gold-soft); --crimson: var(--crimson); /* error */ --crimson-soft: var(--crimson-soft); /* "On" text — what sits on top of a colored chip / button */ --on-accent: var(--ink-0); --on-ink: var(--card); /* Coach / hero-dark surfaces — used by mobile coach + paywall background. In editorial mode these become deep navy + lifted navy. */ --panel-dark: #0f1115; --panel-dark-2: #15181f; /* Card surface — bright surface that sits on paper-0. In dark theme this flips to a lifted dark surface so cards still pop. */ --card: var(--card); --card-subtle: rgba(255, 255, 255, 0.85); /* Surface depths */ --line: var(--shadow-lg); --line-strong: rgba(20, 22, 28, 0.14); --shadow-sm: 0 1px 2px var(--shadow-sm); --shadow-md: 0 6px var(--space-6) var(--shadow-md); --shadow-lg: 0 var(--space-5) 45px var(--shadow-lg); --shadow-xl: 0 25px 50px -var(--space-3) rgba(20, 22, 28, 0.25); --shadow-2xl: 0 35px 60px -15px rgba(20, 22, 28, 0.3); /* Editorial type stack */ --font-display: 'Fraunces', 'DM Serif Display', Georgia, serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-serif: 'Source Serif Pro', 'Source Serif 4', Georgia, serif; --font-mono: 'JetBrains Mono', 'IBM Plex Mono', SF Mono, monospace; /* Radii */ --r-xs: var(--space-1); --r-sm: 6px; --r-md: 10px; --r-lg: 1var(--space-1); --r-xl: var(--space-5); --r-2xl: 2var(--space-2); /* Layout & Metrics */ --header-height-desktop: 72px; --header-height-mobile: 60px; --text-container-max-width: 1100px; /* Editorial & Brand Bridge */ --periwinkle-light: #e5e8f6; --blush-light: #f5dcd6; --butter-light: #f9ecc8; --sage-light: #d0dcc5; /* ───────────────────────────────────────────────────────────── FleetSentinel Unified Tokens (A & B) ───────────────────────────────────────────────────────────── */ /* Direction A: Refined Classic (Light/Iris) */ --a-hue: 270; --a-accent: oklch(0.52 0.13 var(--a-hue)); --a-accent-soft: oklch(0.96 0.025 var(--a-hue)); --a-accent-ink: oklch(0.34 0.10 var(--a-hue)); --a-bg: oklch(0.985 0.004 var(--a-hue)); --a-surface: var(--card); --a-line: oklch(0.92 0.005 var(--a-hue)); --a-line-strong: oklch(0.86 0.006 var(--a-hue)); --a-ink: oklch(0.22 0.008 var(--a-hue)); --a-ink-2: oklch(0.42 0.01 var(--a-hue)); --a-ink-3: oklch(0.58 0.01 var(--a-hue)); --a-ok: oklch(0.62 0.12 150); --a-ok-soft: oklch(0.96 0.02 150); --a-good: var(--a-ok); --a-good-soft: var(--a-ok-soft); --a-warn: oklch(0.72 0.13 75); --a-err: oklch(0.58 0.14 28); --a-repair: oklch(0.55 0.13 295); /* Direction B: Mission Control (Dark/Signal) */ --b-hue: 145; --b-bg: oklch(0.135 0.006 250); --b-bg-2: oklch(0.165 0.006 250); --b-bg-3: oklch(0.19 0.007 250); --b-bg-cell: oklch(0.155 0.006 250); --b-line: oklch(0.26 0.007 250); --b-line-soft: oklch(0.22 0.006 250); --b-ink: oklch(0.96 0.005 250); --b-ink-2: oklch(0.74 0.006 250); --b-ink-3: oklch(0.55 0.007 250); --b-ink-4: oklch(0.4 0.008 250); --b-signal: oklch(0.78 0.16 var(--b-hue)); --b-signal-dim: oklch(0.5 0.10 var(--b-hue)); --b-signal-bg: oklch(0.22 0.04 var(--b-hue)); --b-warn: oklch(0.78 0.14 75); --b-err: oklch(0.65 0.18 25); } /* ───────────────────────────────────────────────────────────── Theme: Editorial (pitch-deck palette) Navy ink · periwinkle haze · dusty rose accent ───────────────────────────────────────────────────────────── */ [data-theme="editorial"] { --paper-0: #fcfbf9; --paper-1: #f3f1ee; --paper-2: #e6e3dd; --ink-0: #232946; --ink-1: #2e3556; --ink-2: #5b6485; --ink-3: #8a92ad; --ink-4: #b8c1d4; --brand: #232946; --brand-soft: #e5e8f6; --brand-deep: #161a35; --clay: #d99aa3; --clay-soft: #f6e3e6; --clay-deep: #8a4d56; --sage: #b8c1ec; --sage-soft: #eef0fa; --on-accent: #232946; --on-ink: #fcfbf9; --panel-dark: #161a35; --panel-dark-2: #232946; --line: rgba(35, 41, 70, 0.10); --line-strong: rgba(35, 41, 70, 0.16); --shadow-sm: 0 1px 2px rgba(35, 41, 70, 0.04); --shadow-md: 0 6px var(--space-6) rgba(35, 41, 70, 0.07); --shadow-lg: 0 var(--space-5) 45px rgba(35, 41, 70, 0.09); } [data-theme="editorial"] .coach-surface { --coach-ink: #232946; --coach-accent: #d99aa3; } [data-theme="editorial"] .admin-surface { --a-bg: #0c0f1a; --a-panel: #161a35; --a-panel-2: #232946; --a-brand: #b8c1ec; } /* ───────────────────────────────────────────────────────────── Theme: Dark — full inversion, dusty rose preserved Surface = deep navy paper, ink = warm parchment ───────────────────────────────────────────────────────────── */ [data-theme="dark"] { --paper-0: #0f1320; --paper-1: #1a1f33; --paper-2: #2a3050; --ink-0: #f3eee6; --ink-1: #d8d3c9; --ink-2: #9aa1b8; --ink-3: #6f7896; --ink-4: #4a5375; --brand: #b8c1ec; --brand-soft: #2a3050; --brand-deep: #e5e8f6; --clay: #e7b3bb; --clay-soft: #2e2128; --clay-deep: #f3d0d5; --sage: #b8c1ec; --sage-soft: #232946; --on-accent: #232946; --on-ink: #0f1320; --panel-dark: #060816; --panel-dark-2: #0f1320; --line: rgba(255, 255, 255, 0.08); --line-strong: rgba(255, 255, 255, 0.14); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 6px var(--space-6) rgba(0, 0, 0, 0.35); --shadow-lg: 0 var(--space-5) 45px rgba(0, 0, 0, 0.5); --card: #1a1f33; } [data-theme="dark"] .coach-surface { --coach-ink: #0f1320; --coach-paper: #1a1f33; --coach-accent: #e7b3bb; } [data-theme="dark"] .admin-surface { --a-bg: #050614; --a-panel: #0f1320; --a-panel-2: #1a1f33; --a-text: #f3eee6; --a-muted: #9aa1b8; --a-brand: #b8c1ec; } /* ───────────────────────────────────────────────────────────── AI Coach surface — confident near-black ───────────────────────────────────────────────────────────── */ .coach-surface { --coach-ink: #0f1115; --coach-paper: var(--card); --coach-paper-warm: #f7f6f2; --coach-accent: var(--clay); --coach-rule: rgba(15, 17, 21, 0.08); } /* ───────────────────────────────────────────────────────────── CMS surface — content-first, low-chroma chrome (WordPress mental model) ───────────────────────────────────────────────────────────── */ .cms-surface { --cms-bg: #f1f1f1; --cms-chrome: #1d2327; --cms-chrome-2: #2c3338; --cms-text: #1d2327; --cms-muted: #50575e; --cms-line: #dcdcde; --cms-blue: #2271b1; --cms-blue-deep: #135e96; --cms-paper: var(--card); --cms-lock: #b35900; --cms-lock-soft: #fcf3e6; } /* ───────────────────────────────────────────────────────────── Admin surface — operational, dense, restrained ───────────────────────────────────────────────────────────── */ .admin-surface { --a-bg: #0e1014; --a-panel: #15181f; --a-panel-2: #1c1f28; --a-line: rgba(255, 255, 255, 0.06); --a-line-strong: rgba(255, 255, 255, 0.10); --a-text: #e6e8ee; --a-muted: var(--ink-3); --a-dim: var(--ink-2); --a-brand: #7d8af0; --a-good: #4ec38e; --a-warn: #d8a64b; --a-bad: #e07271; } /* ───────────────────────────────────────────────────────────── Type helpers — opt-in classes for editorial typography ───────────────────────────────────────────────────────────── */ .refined-type { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; font-feature-settings: 'ss01' 1, 'cv11' 1; } .refined-type .display, .refined-display { font-family: var(--font-display); letter-spacing: -0.02em; } .refined-serif { font-family: var(--font-serif); } .refined-mono { font-family: var(--font-mono); font-feature-settings: 'tnum' 1; } .refined-tnum { font-variant-numeric: tabular-nums; } /* ───────────────────────────────────────────────────────────── FleetSentinel Root Scopes ───────────────────────────────────────────────────────────── */ .a-root { --accent: var(--a-accent); --accent-soft: var(--a-accent-soft); --accent-ink: var(--a-accent-ink); --bg: var(--a-bg); --surface: var(--a-surface); --line: var(--a-line); --line-strong: var(--a-line-strong); --ink: var(--a-ink); --ink-2: var(--a-ink-2); --ink-3: var(--a-ink-3); --ok: var(--a-ok); --warn: var(--a-warn); --err: var(--a-err); --repair: var(--a-repair); background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 13.5px; line-height: 1.5; letter-spacing: -0.005em; } .b-root { --bg: var(--b-bg); --bg-2: var(--b-bg-2); --bg-3: var(--b-bg-3); --bg-cell: var(--b-bg-cell); --line: var(--b-line); --line-soft: var(--b-line-soft); --ink: var(--b-ink); --ink-2: var(--b-ink-2); --ink-3: var(--b-ink-3); --ink-4: var(--b-ink-4); --signal: var(--b-signal); --signal-dim: var(--b-signal-dim); --signal-bg: var(--b-signal-bg); --warn: var(--b-warn); --err: var(--b-err); background: var(--bg); color: var(--ink); font-family: var(--font-mono); font-size: var(--space-3); line-height: 1.45; font-feature-settings: 'tnum'; } /* ───────────────────────────────────────────────────────────── Premium Design Polish — Specification Hooks ───────────────────────────────────────────────────────────── */ @keyframes fs-pulse { 0% { box-shadow: 0 0 0 0 currentColor; opacity: 1; } 70% { box-shadow: 0 0 0 6px transparent; opacity: 0.85; } 100% { box-shadow: 0 0 0 0 transparent; opacity: 1; } } @keyframes fs-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0.25; } } /* Floating animation for doodles/icons */ @keyframes fs-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-var(--space-1)); } } .hover-float:hover .doodle, .hover-float:hover svg, .hover-float:hover img { animation: fs-float 3s ease-in-out infinite; } /* Specular Highlight: Light-source gloss for primary buttons */ .specular-btn { position: relative; overflow: hidden; } .specular-btn::after { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle at center, rgba(255,255,255,0.15) 0%, transparent 70%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .specular-btn:hover::after { opacity: 1; animation: specular-sweep 1.2s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes specular-sweep { 0% { transform: translate(-30%, -30%); } 100% { transform: translate(10%, 10%); } } /* Affirmative Easing: Spring-loaded "success" transition */ .affirmative-moment { transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } .affirmative-moment.active { transform: scale(1.05); } /* ───────────────────────────────────────────────────────────── Shared utility classes inside artboards (from design handoff) ───────────────────────────────────────────────────────────── */ .artboard { font-family: var(--font-sans); color: var(--ink-1); -webkit-font-smoothing: antialiased; font-feature-settings: 'ss01' 1, 'cv11' 1; } .artboard h1, .artboard h2, .artboard h3 { font-family: var(--font-display); color: var(--ink-0); letter-spacing: -0.02em; } .artboard .display { font-family: var(--font-display); letter-spacing: -0.02em; } .artboard .serif { font-family: var(--font-serif); } .artboard .mono { font-family: var(--font-mono); font-feature-settings: 'tnum' 1; } .artboard .tnum { font-variant-numeric: tabular-nums; } /* Typography Helpers */ .display { font-family: var(--font-display); letter-spacing: -0.02em; } .serif { font-family: var(--font-serif); } .mono { font-family: var(--font-mono); font-feature-settings: 'tnum' 1; } .tnum { font-variant-numeric: tabular-nums; } /* Placeholder image — subtly-striped */ .placeholder-img { background: repeating-linear-gradient( 135deg, rgba(20,22,28,0.04) 0 var(--space-2), rgba(20,22,28,0.07) var(--space-2) var(--space-5) ), var(--paper-1); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em; text-transform: uppercase; border-radius: var(--r-md); } /* Watercolor pill — pulled back from current overuse */ .wc-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-full); font: 500 11.5px/1 var(--font-sans); letter-spacing: 0.01em; } .wc-pill .dot { width: 6px; height: 6px; border-radius: var(--radius-full); } /* "Doodle" abstract glyph — restrained one-stroke icons */ .doodle { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; color: var(--ink-0); } /* Before/After badge inside artboards */ .state-badge { position: absolute; top: 12px; right: 12px; font: 600 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.12em; padding: 5px 8px; border-radius: var(--radius-full); background: rgba(255,255,255,0.9); color: var(--ink-2); border: 1px solid var(--line); z-index: 50; } .state-badge.before { color: #b25b3a; border-color: rgba(196,123,74,0.4); background: #fdf3ec; } .state-badge.after { color: #2c6d54; border-color: rgba(78,195,142,0.4); background: #ebf6f0; }