/* ============================================================ SILVA DESIGN TOKENS Source of truth for all colours, typography and spacing. A single token change propagates everywhere — never hardcode a colour or font-family outside :root or body.ai-arm. ============================================================ */ /* ── Google Fonts — update here only ── */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,700;1,9..40,400&family=Playfair+Display:ital@1&family=Ubuntu:wght@400;500;700&display=swap'); /* ── Legal arm (default) ── */ :root { /* Backgrounds */ --bg: #fdfcf8; --bg-alt: #ffffff; --bg-panel: #f0f7ed; --bg-panel-soft: #e8f5e3; --bg-deeper: #f5f2eb; --bg-dark: #3C3E44; /* Text */ --ink: #1a1a1a; --ink-soft: #4a4a4a; --ink-muted: #777777; /* Brand */ --accent: #4A8B35; --accent-bright: #5EA040; --accent-dim: #3A7228; --charcoal: #2C2E32; --orange: #C8692A; --orange-bright: #E07830; /* Text on dark */ --parchment: #F0EDE6; /* Rules */ --rule: #e5e0d3; --rule-soft: #ede7d8; --rule-mid: #dbd4c4; /* Glass — hamburger nav and AI agent button only */ --glass-bg: rgba(253, 252, 248, 0.72); --glass-border: rgba(58, 124, 34, 0.18); /* Typography */ --font-body: 'DM Sans', sans-serif; --font-display: 'Ubuntu', sans-serif; --font-accent-italic: 'Playfair Display', serif; /* Spacing */ --space-xs: 8px; --space-sm: 16px; --space-md: 32px; --space-lg: 64px; --space-xl: 100px; /* Layout — content caps at --content-max on wide screens; section backgrounds stay full-bleed. --gutter-x is the horizontal section padding: 72px normally, growing to centre content past ~1584px wide. */ --content-max: 1440px; --gutter-x: max(72px, (100% - var(--content-max)) / 2); /* Motion */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --duration-fast: 0.15s; --duration-mid: 0.3s; --duration-slow: 0.65s; /* Border radius */ --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; } /* ── AI arm — DARK (default) — applied via body.ai-arm ── Flipping tokens below switch to light when has .ai-light. The --ai-* surface tokens stay dark in BOTH modes (hero + footer). */ body.ai-arm { /* Flipping — dark values */ --bg: #1E2025; --bg-raised: #252830; --bg-card: #2A2D35; --bg-card-hover: #2F3340; --bg-deeper: #141519; --ink: #F0EDE6; --ink-soft: rgba(240, 237, 230, 0.65); --ink-muted: rgba(240, 237, 230, 0.38); --accent: #4A8B35; --accent-bright: #5EA040; --rule: rgba(240, 237, 230, 0.08); --rule-soft: rgba(240, 237, 230, 0.06); --rule-mid: rgba(240, 237, 230, 0.14); --glass-bg: rgba(30, 32, 37, 0.80); --glass-border: rgba(200, 105, 42, 0.22); /* Always-dark surfaces — hero and footer keep these in both modes */ --ai-hero-bg: #23262E; --ai-foot-bg: #1A1C21; --ink-on-dark: #F0EDE6; --ink-on-dark-soft: rgba(240, 237, 230, 0.66); --rule-on-dark: rgba(240, 237, 230, 0.12); } /* ── AI arm — LIGHT — applied via .ai-light ── Overrides only the flipping tokens; the --ai-* surfaces stay dark. */ html.ai-light body.ai-arm { --bg: #F2F4F7; --bg-raised: #FFFFFF; --bg-card: #FFFFFF; --bg-card-hover: #F8FAFC; --bg-deeper: #E9ECF1; --ink: #1E2025; --ink-soft: #4A4F57; --ink-muted: #6B7178; --rule: #E4E7EC; --rule-soft: #EDEFF2; --rule-mid: #D7DCE3; --orange-bright: #C8692A; /* stronger orange for contrast on light */ --glass-bg: rgba(255, 255, 255, 0.55); --glass-border: rgba(200, 105, 42, 0.30); } /* AI pages that opt out of light (e.g. the /ai showcase hub) — add class "ai-force-dark" to . Re-asserts the dark set even under html.ai-light, so the page stays a dark showcase in both themes. The toggle is hidden here; it still works on every other AI page. */ html.ai-light body.ai-arm.ai-force-dark { --bg: #1E2025; --bg-raised: #252830; --bg-card: #2A2D35; --bg-card-hover: #2F3340; --bg-deeper: #141519; --ink: #F0EDE6; --ink-soft: rgba(240, 237, 230, 0.65); --ink-muted: rgba(240, 237, 230, 0.38); --rule: rgba(240, 237, 230, 0.08); --rule-soft: rgba(240, 237, 230, 0.06); --rule-mid: rgba(240, 237, 230, 0.14); --orange-bright: #E07830; --glass-bg: rgba(30, 32, 37, 0.80); --glass-border: rgba(200, 105, 42, 0.22); }