/* ============================================================================
Softsync — Design Tokens
Drop-in CSS variables for color, type, spacing, radii, and shadows.
Pair with the Google Fonts at the bottom of this file.
Light theme is "warm paper" — the surface that defines the Softsync look.
Dark mode swaps to a deep neutral; both share the same semantic vocabulary.
============================================================================ */
:root {
/* ── Type families ────────────────────────────────────────────────────── */
--serif: "Instrument Serif", "Source Serif 4", "Iowan Old Style", Georgia, serif;
--serif-body: "Source Serif 4", "Iowan Old Style", Georgia, serif;
--sans: "Inter", system-ui, -apple-system, sans-serif;
--mono: "JetBrains Mono", ui-monospace, monospace;
/* ── Surfaces (light · "warm paper") ──────────────────────────────────── */
--bg: #f5efea; /* canvas */
--bg-raised: #faf7f5; /* cards, popovers, modals */
--bg-sunken: #f2efe6; /* table headers, code wells */
--bg-hover: #f4f1e8; /* row hover, button hover */
--bg-inset: #ece8db; /* selected nav, active toggle */
/* ── Ink (text) ───────────────────────────────────────────────────────── */
--ink: #3d2020; /* primary */
--ink-2: #4a2228; /* body */
--ink-3: #7e5558; /* secondary, captions */
--ink-4: #b89799; /* tertiary, placeholders, disabled */
/* ── Lines ────────────────────────────────────────────────────────────── */
--line: #e4dfd0; /* default border */
--line-2: #ede8d9; /* subtle dividers */
--line-strong: #d5cfbe; /* hovered border, focus ring base */
/* ── Brand · Accent ───────────────────────────────────────────────────── */
--accent: #6d071a; /* burgundy — primary CTA, brand mark */
--accent-2: #d97a56; /* warm copper — used for "click" tracking, secondary highlight */
--accent-ink: #ffffff; /* text on --accent */
--accent-soft: #f5e8e0; /* tinted bg behind accent text */
--accent-soft-2: #edd8c9; /* hover state of accent-soft */
/* ── Semantic ─────────────────────────────────────────────────────────── */
--pos: oklch(52% 0.13 155); /* success, positive trend */
--neg: oklch(55% 0.18 28); /* error, negative trend */
--warn: oklch(66% 0.14 75); /* warning, "warm" temp */
/* Pill tones — paired bg + ink + border (use as-is on either theme) */
--tone-hot-bg: oklch(92% 0.05 30); --tone-hot-ink: oklch(45% 0.15 30); --tone-hot-line: oklch(85% 0.06 30);
--tone-warm-bg: oklch(94% 0.04 75); --tone-warm-ink: oklch(45% 0.13 60); --tone-warm-line: oklch(86% 0.05 70);
--tone-cold-bg: oklch(94% 0.03 230); --tone-cold-ink: oklch(45% 0.08 230); --tone-cold-line: oklch(86% 0.04 230);
--tone-pos-bg: oklch(94% 0.05 155); --tone-pos-ink: oklch(42% 0.12 155); --tone-pos-line: oklch(86% 0.05 155);
/* Pipeline stage dots (use directly as background-color) */
--stage-lead: oklch(75% 0.04 230);
--stage-qualified: oklch(72% 0.13 250);
--stage-proposal: oklch(72% 0.13 75);
--stage-won: oklch(60% 0.15 155);
--stage-lost: oklch(65% 0.08 20);
/* ── Radii ────────────────────────────────────────────────────────────── */
--radius-sm: 5px; /* pills, mini-buttons, inline tags */
--radius: 8px; /* default — buttons, inputs, cards */
--radius-lg: 14px; /* large surface cards, modals */
--radius-xl: 22px; /* hero panels, drawers */
/* ── Shadows (tuned for warm paper bg) ────────────────────────────────── */
--shadow-xs: 0 1px 1px rgba(31, 30, 28, 0.03);
--shadow-sm: 0 1px 3px rgba(31, 30, 28, 0.05), 0 1px 2px rgba(31, 30, 28, 0.04);
--shadow: 0 6px 20px -6px rgba(31, 30, 28, 0.09), 0 2px 4px rgba(31, 30, 28, 0.05);
--shadow-lg: 0 28px 56px -16px rgba(31, 30, 28, 0.2), 0 4px 10px rgba(31, 30, 28, 0.06);
/* ── Spacing (4-based) — informal, used as gap/padding values ─────────── */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 20px;
--sp-6: 24px;
--sp-8: 32px;
--sp-10: 40px;
--sp-12: 48px;
}
/* ── Dark theme ───────────────────────────────────────────────────────────
Apply with or any ancestor.
Inverts surfaces and shifts accent to a near-white "ink"-toned button. */
[data-theme="dark"] {
--bg: #201d19;
--bg-raised: #22201d;
--bg-sunken: #141211;
--bg-hover: #2a2723;
--bg-inset: #100e0d;
--ink: #f5eced;
--ink-2: #c9b8ba;
--ink-3: #8a7173;
--ink-4: #5c474a;
--line: #302c27;
--line-2: #26231f;
--line-strong: #3a3630;
--accent: #f8f4f1;
--accent-2: #e8916f;
--accent-ink: #1a1816;
--accent-soft: #3a2620;
--accent-soft-2: #4a2e25;
}
/* ── Base + helpers ───────────────────────────────────────────────────── */
html, body {
margin: 0; padding: 0;
font-family: var(--sans);
background: var(--bg);
color: var(--ink);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: "ss01", "cv11", "cv05";
letter-spacing: -0.005em;
transition: background 220ms ease, color 220ms ease;
}
.serif { font-family: var(--serif); letter-spacing: 0.045em; font-weight: 400; }
.serif-body { font-family: var(--serif-body); letter-spacing: 0.045em; }
.mono { font-family: var(--mono); font-feature-settings: "tnum"; font-weight: 400; }
/* ── Type scale (recommendations, applied via inline style or utility) ──
10 tiny metadata, chart ticks, mono counts
11 uppercase eyebrow labels (letter-spacing 0.06em), timestamps, sm pills
12 secondary body, captions, sm buttons, tab labels
13 primary body, table cells, nav items, inputs
14 long-form body, chat messages, composer textarea
16 card/panel headings (sans, weight 500)
18 medium serif headings
22 inspector panel headings (serif)
28 drawer / modal display headings (serif)
48+ hero/marketing display (serif)
─────────────────────────────────────────────────────────────────────────── */
/* ── Selection ────────────────────────────────────────────────────────── */
::selection { background: var(--accent); color: var(--accent-ink); }
/* ── Required Google Fonts ──────────────────────────────────────────────
Add to of any page using this system:
─────────────────────────────────────────────────────────────────────────── */