/* ============================================================ tokens.css — Round 1 (design tokens) The single source of truth for every color, font, spacing, radius, shadow, and motion duration in the app. Component CSS reads from these tokens; no component should hard-code a hex value. Naming conventions: --color-{role}-{tone} semantic — what the color means --color-{family}-{50..900} raw palette ramps for accents --space-{n} 8px-base spacing scale --text-{size} type ramp --radius-{size} --shadow-{size} --motion-{name} Round 1 establishes the palette but does NOT yet apply the new pastel direction everywhere — that's Round 2. This file ships the full token vocabulary so Round 2 is "swap which tokens components reference," not "introduce a token system." ============================================================ */ :root { /* ============================================================ PALETTE — raw color ramps, pastel-leaning 50 = lightest tint (background tier), 900 = darkest (text tier). 500 is the canonical hue. All ramps land at S~75% / L~70% for the 200-400 range to keep the family harmonious. ============================================================ */ /* Paper / ink — neutral spine of the app */ --color-paper-50: #FAF8F2; /* page background */ --color-paper-100: #F4F1E8; /* card-on-page subtle wash */ --color-paper-200: #ECE7D8; /* divider tint */ --color-ink-100: #8A8783; /* tertiary text */ --color-ink-300: #5F5E5A; /* secondary text */ --color-ink-700: #3A3936; /* near-primary, hover/emphasis */ --color-ink-900: #2C2C2A; /* primary text */ /* Sky — components stream, "quote out" status, info accents */ --color-sky-50: #EEF5FC; --color-sky-100: #DCEAF7; --color-sky-200: #B6D2EC; --color-sky-400: #6BA3D8; --color-sky-600: #2E70B0; --color-sky-800: #1F4D7A; --color-sky-900: #0F2A45; /* Peach — scaffolding USED stream, "stale" status */ --color-peach-50: #FBEFDF; --color-peach-100: #F8E2C5; --color-peach-200: #F3CC95; --color-peach-400: #E5A65B; --color-peach-600: #B8771F; --color-peach-800: #7D4F12; --color-peach-900: #3F2607; /* Sage — formwork USED stream, "active customer" / healthy status */ --color-sage-50: #E6F4ED; --color-sage-100: #D1EAD9; --color-sage-200: #A6D2B5; --color-sage-400: #5DAB7C; --color-sage-600: #2D7E54; --color-sage-800: #1B543A; --color-sage-900: #0A2D1F; /* Lilac — "other" stream, neutral-but-not-grey emphasis */ --color-lilac-50: #F0EBF6; --color-lilac-100: #E1D8EE; --color-lilac-200: #C4B0DC; --color-lilac-400: #9879BF; --color-lilac-600: #6B47A0; --color-lilac-800: #482E70; --color-lilac-900: #271742; /* Rose — risk signals, error, "overdue" status */ --color-rose-50: #FBE9E7; --color-rose-100: #F8D2CD; --color-rose-200: #F1A8A0; --color-rose-400: #DD6B5C; --color-rose-600: #B0392A; --color-rose-800: #76251A; --color-rose-900: #3A100B; /* Mint — explicit positive / "go" / "completed" — distinct from sage because sage carries a stream meaning. Mint is purely status. */ --color-mint-50: #E1F5EE; --color-mint-100: #C9EBDD; --color-mint-400: #4FB890; --color-mint-600: #1F8062; --color-mint-900: #04342C; /* Sand — neutral cool, used for "cool" temperature and dormant tones */ --color-sand-50: #F1EFE8; --color-sand-100: #E5E2D6; --color-sand-300: #B8B4A6; --color-sand-600: #6E6B5F; --color-sand-900: #2C2A22; /* ============================================================ SEMANTIC — what tokens components should actually use ============================================================ */ /* Surfaces */ --bg-page: var(--color-paper-50); --bg-elev-1: #FFFFFF; --bg-elev-2: var(--color-paper-100); /* nested card on a card */ --bg-input: #FFFFFF; --bg-overlay: rgba(28, 28, 26, 0.42); /* modal scrim */ /* Text */ --text-primary: var(--color-ink-900); --text-secondary: var(--color-ink-300); --text-tertiary: var(--color-ink-100); --text-on-accent: #FFFFFF; --text-link: var(--color-sky-600); --text-link-hover: var(--color-sky-800); /* Borders */ --border-subtle: rgba(28, 28, 26, 0.06); --border-default: rgba(28, 28, 26, 0.10); --border-strong: rgba(28, 28, 26, 0.18); --border-focus: var(--color-sky-600); /* Status (account-level temperature gradient — hot → dormant) */ --status-hot-bg: var(--color-rose-50); --status-hot-fg: var(--color-rose-800); --status-hot-accent: var(--color-rose-600); --status-warm-bg: var(--color-peach-50); --status-warm-fg: var(--color-peach-800); --status-warm-accent: var(--color-peach-600); --status-cool-bg: var(--color-sky-50); --status-cool-fg: var(--color-sky-800); --status-cool-accent: var(--color-sky-600); --status-cold-bg: var(--color-sand-50); --status-cold-fg: var(--color-sand-900); --status-cold-accent: var(--color-sand-600); --status-dormant-bg: var(--color-paper-100); --status-dormant-fg: var(--color-ink-300); --status-dormant-accent: var(--color-ink-100); /* Status (operational — what action is needed) */ --status-overdue-bg: var(--color-rose-50); --status-overdue-fg: var(--color-rose-900); --status-overdue-accent: var(--color-rose-600); --status-overdue-pill-bg: var(--color-rose-600); --status-overdue-pill-fg: #FFFFFF; --status-stale-bg: var(--color-peach-50); --status-stale-fg: var(--color-peach-900); --status-stale-accent: var(--color-peach-600); --status-stale-pill-bg: var(--color-peach-600); --status-stale-pill-fg: #FFFFFF; --status-quote-out-bg: var(--color-sky-50); --status-quote-out-fg: var(--color-sky-900); --status-quote-out-accent: var(--color-sky-600); --status-quote-out-pill-bg: var(--color-sky-600); --status-quote-out-pill-fg: #FFFFFF; --status-active-bg: var(--color-mint-50); --status-active-fg: var(--color-mint-900); --status-active-accent: var(--color-mint-600); --status-active-pill-bg: var(--color-mint-600); --status-active-pill-fg: #FFFFFF; /* Streams — the four revenue streams */ --stream-components-bg: var(--color-sky-50); --stream-components-fg: var(--color-sky-800); --stream-components-dot: var(--color-sky-400); --stream-scaff-used-bg: var(--color-peach-50); --stream-scaff-used-fg: var(--color-peach-800); --stream-scaff-used-dot: var(--color-peach-400); --stream-formwork-used-bg: var(--color-sage-50); --stream-formwork-used-fg: var(--color-sage-800); --stream-formwork-used-dot: var(--color-sage-400); --stream-other-bg: var(--color-lilac-50); --stream-other-fg: var(--color-lilac-800); --stream-other-dot: var(--color-lilac-400); /* Sentiment (touch detail signals) */ --sentiment-positive: var(--color-mint-600); --sentiment-neutral: var(--color-ink-100); --sentiment-mixed: var(--color-peach-600); --sentiment-negative: var(--color-rose-600); /* Brand accent — the gold "Formon" italic */ --brand-gold: #6B5B2E; --brand-gold-soft: #B89858; /* ============================================================ TYPOGRAPHY Serif for display + headlines + big numbers. Sans for UI body, labels, controls. Mono for metadata, timestamps, small caps. ============================================================ */ --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", "Helvetica Neue", "IBM Plex Sans", system-ui, sans-serif; --font-serif: "Fraunces", Georgia, "Times New Roman", serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Type ramp — used by .text-* utilities and component CSS */ --text-xs: 11px; --text-sm: 12px; --text-base: 14px; --text-md: 15px; --text-lg: 17px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 32px; --text-4xl: 40px; --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.5; --leading-relaxed: 1.65; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-mono: 0.06em; --tracking-caps: 0.1em; /* ============================================================ SPACING — 4px base, exposed at 4/8/12/16/20/24/32/48/64 ============================================================ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ============================================================ RADII ============================================================ */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px; /* ============================================================ SHADOWS — soft, low-contrast; depth comes from layering not weight ============================================================ */ --shadow-xs: 0 1px 2px rgba(28, 28, 26, 0.04); --shadow-sm: 0 1px 3px rgba(28, 28, 26, 0.06), 0 1px 2px rgba(28, 28, 26, 0.04); --shadow-md: 0 4px 12px rgba(28, 28, 26, 0.08), 0 1px 3px rgba(28, 28, 26, 0.04); --shadow-lg: 0 12px 32px rgba(28, 28, 26, 0.12), 0 2px 6px rgba(28, 28, 26, 0.06); --shadow-xl: 0 24px 56px rgba(28, 28, 26, 0.18), 0 4px 12px rgba(28, 28, 26, 0.08); /* ============================================================ MOTION ============================================================ */ --motion-fast: 120ms; --motion-base: 200ms; --motion-slow: 320ms; --easing-out: cubic-bezier(0.22, 1, 0.36, 1); --easing-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* ============================================================ LEGACY ALIASES — TO BE REMOVED IN ROUND 2 These exist solely so the existing styles-additions-v* rules continue to resolve while components migrate to the new tokens. Do not introduce new code that uses these. ============================================================ */ --bg-elev: var(--bg-elev-1); --border-tertiary: var(--border-subtle); --border-secondary: var(--border-default); --color-text-primary: var(--text-primary); --color-text-secondary: var(--text-secondary); --color-text-tertiary: var(--text-tertiary); --color-background-primary: var(--bg-elev-1); --color-background-secondary: rgba(28, 28, 26, 0.04); --color-border-tertiary: var(--border-subtle); --color-border-secondary: var(--border-default); --border-radius-sm: var(--radius-sm); --border-radius-md: var(--radius-md); --border-radius-lg: var(--radius-lg); }