/* ========================================================================== SIA design tokens — the single source of truth for colour, type and shape. This file defines vocabulary only. It styles no component and must never contain a selector other than :root. Every surface stylesheet (custom.css, home.css, cxo.css, planning/styles.css, parser_web/styles.css) aliases its own historical variable names onto these tokens, so downstream rules keep working untouched while the product agrees on one palette, one type stack and one shape scale. Consume the purpose tokens, not the primitives. The primitives exist so a brand change stays a one-line edit. ========================================================================== */ :root { /* -------------------------------------------------------------------- 1. Brand primitives — literal values, referenced only by this file. -------------------------------------------------------------------- */ --sia-green-900: #012a1f; --sia-green-800: #014531; /* brand green */ --sia-green-600: #026d4a; --sia-green-400: #4a6b5d; --sia-green-200: #7a9486; --sia-lime-600: #c8eb2d; --sia-lime-500: #dfff68; /* product accent */ --sia-cream-50: #fafaf8; --sia-cream-100: #f6f4f1; --sia-cream-200: #f0ede6; --sia-cream-300: #e6e1d7; --sia-cream-400: #d8d2c7; --sia-slate-800: #2d3748; --sia-slate-600: #5a6675; --sia-slate-400: #8a93a1; --sia-white: #ffffff; --sia-bone: #f8f7f2; /* text on brand-green surfaces */ /* -------------------------------------------------------------------- 2. Surfaces -------------------------------------------------------------------- */ --sia-bg: var(--sia-cream-100); --sia-bg-soft: var(--sia-cream-50); --sia-surface: var(--sia-white); --sia-surface-2: var(--sia-cream-200); --sia-surface-3: var(--sia-cream-300); --sia-surface-inverse: var(--sia-green-800); --sia-surface-inverse-strong: var(--sia-green-900); /* -------------------------------------------------------------------- 3. Text Two primary text roles rather than one, deliberately. Organization Brain sets body copy in brand green; the comparator and planning data screens set it in slate, which stays easier to read in dense tables. Both are legitimate, so both are named — surfaces keep the ramp they already use while everything else about them unifies. -------------------------------------------------------------------- */ --sia-text-brand: var(--sia-green-800); /* headings, brand contexts, OB body */ --sia-text: var(--sia-slate-800); /* body and data copy */ --sia-text-muted: var(--sia-green-400); --sia-text-faint: var(--sia-green-200); --sia-text-slate-muted: var(--sia-slate-600); --sia-text-slate-faint: var(--sia-slate-400); --sia-on-brand: var(--sia-bone); --sia-on-accent: var(--sia-green-900); /* -------------------------------------------------------------------- 4. Brand and accent Lime is the product accent everywhere. Emerald is no longer an accent — it survives only as the semantic success colour below. -------------------------------------------------------------------- */ --sia-brand: var(--sia-green-800); --sia-brand-strong: var(--sia-green-900); --sia-brand-muted: var(--sia-green-600); --sia-brand-soft: rgba(1, 69, 49, 0.1); --sia-accent: var(--sia-lime-500); --sia-accent-strong: var(--sia-lime-600); --sia-accent-soft: rgba(223, 255, 104, 0.34); --sia-accent-faint: rgba(223, 255, 104, 0.14); --sia-gradient-brand: linear-gradient(135deg, #014531 0%, #026d4a 100%); --sia-gradient-accent: linear-gradient(135deg, #dfff68 0%, #c8eb2d 100%); /* -------------------------------------------------------------------- 5. Borders -------------------------------------------------------------------- */ --sia-border: var(--sia-cream-400); --sia-border-light: var(--sia-cream-300); --sia-border-soft: rgba(1, 69, 49, 0.1); --sia-border-strong: rgba(1, 69, 49, 0.22); --sia-border-inverse: rgba(248, 247, 242, 0.18); /* -------------------------------------------------------------------- 6. Semantic status -------------------------------------------------------------------- */ --sia-success: #10b981; --sia-success-strong: #0e9f6e; --sia-success-soft: #ecfdf5; --sia-warning: #d69e2e; --sia-warning-strong: #b7791f; --sia-warning-soft: #fdf6e9; --sia-danger: #e53e3e; --sia-danger-strong: #c53030; --sia-danger-soft: #fef2f2; --sia-info: #0ea5e9; --sia-info-soft: #eff9fe; --sia-success-rgb: 16, 185, 129; --sia-warning-rgb: 214, 158, 46; --sia-danger-rgb: 229, 62, 62; --sia-brand-rgb: 1, 69, 49; --sia-accent-rgb: 223, 255, 104; /* -------------------------------------------------------------------- 7. Typography -------------------------------------------------------------------- */ --sia-font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --sia-font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, Consolas, monospace; --sia-text-2xs: 0.6875rem; /* 11px — micro labels */ --sia-text-xs: 0.75rem; --sia-text-sm: 0.8125rem; --sia-text-base: 0.9375rem; --sia-text-md: 1rem; --sia-text-lg: 1.125rem; --sia-text-xl: 1.375rem; --sia-text-2xl: 1.75rem; --sia-text-3xl: 2.25rem; --sia-leading-tight: 1.2; --sia-leading-snug: 1.4; --sia-leading-normal: 1.6; --sia-tracking-label: 0.08em; /* uppercase micro labels */ /* -------------------------------------------------------------------- 8. Shape -------------------------------------------------------------------- */ --sia-radius-xs: 6px; --sia-radius-sm: 8px; --sia-radius-md: 12px; --sia-radius-lg: 16px; --sia-radius-xl: 20px; --sia-radius-2xl: 28px; --sia-radius-full: 9999px; /* -------------------------------------------------------------------- 9. Elevation — all tinted with the brand green rather than neutral black, which is what kept the four surfaces looking like different products. -------------------------------------------------------------------- */ --sia-shadow-xs: 0 1px 2px rgba(1, 69, 49, 0.06); --sia-shadow-sm: 0 2px 8px rgba(1, 69, 49, 0.06); --sia-shadow-md: 0 8px 24px rgba(1, 69, 49, 0.08); --sia-shadow-lg: 0 18px 40px rgba(1, 69, 49, 0.12); --sia-shadow-xl: 0 28px 60px rgba(1, 69, 49, 0.14); /* Two-layer ring: brand green for contrast, lime for identity. */ --sia-focus-ring: 0 0 0 2px var(--sia-surface), 0 0 0 4px var(--sia-brand); --sia-focus-ring-accent: 0 0 0 2px var(--sia-brand), 0 0 0 5px var(--sia-accent-soft); /* -------------------------------------------------------------------- 10. Spacing — 4px base -------------------------------------------------------------------- */ --sia-space-1: 4px; --sia-space-2: 8px; --sia-space-3: 12px; --sia-space-4: 16px; --sia-space-5: 20px; --sia-space-6: 24px; --sia-space-8: 32px; --sia-space-10: 40px; --sia-space-12: 48px; --sia-space-16: 64px; /* -------------------------------------------------------------------- 11. Chrome metrics -------------------------------------------------------------------- */ --sia-topbar-height: 64px; --sia-sidebar-width: 240px; --sia-sidebar-collapsed-width: 60px; --sia-content-max: 1280px; /* -------------------------------------------------------------------- 12. Motion -------------------------------------------------------------------- */ --sia-duration-fast: 120ms; --sia-duration-base: 200ms; --sia-duration-slow: 320ms; --sia-ease-out: cubic-bezier(0.2, 0, 0.2, 1); }