/* _shared/css/tokens.css — design tokens shared across all sites and languages. Structural tokens are identical everywhere and live in :root. Only the brand accent differs per site and is applied via a body.site-* class on each page. */ :root { /* Ink — typography colours */ --color-ink: #1a1a1a; --color-ink-light: #5a5a5a; --color-ink-muted: #8a8a8a; /* Surfaces — backgrounds */ --color-surface: #fafaf8; --color-surface-warm: #f3f1ec; --color-white: #ffffff; /* Borders */ --color-border: #e0ddd6; /* Typography */ --font-serif: 'Instrument Serif', Georgia, serif; --font-sans: 'DM Sans', -apple-system, sans-serif; /* Layout */ --max-width: 1160px; /* Spacing scale */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 4rem; --space-xl: 6rem; } /* --- Per-site brand accent -------------------------------------------------- Every page carries one of these classes on ; components read the accent through var(--color-accent*), so only the brand colour changes per site. */ body.site-dexo { --color-accent: #2d5a3d; /* green */ --color-accent-light: #3a7a52; --color-accent-bg: #eef4f0; } body.site-synaps { --color-accent: #5B21B6; /* violet */ --color-accent-light: #7C3AED; --color-accent-bg: #F3EEFC; } body.site-specta { --color-accent: #1B4F72; /* steel blue */ --color-accent-light: #2563EB; --color-accent-bg: #E8EFF7; }