/*
* ============================================
* LGP DESIGN SYSTEM - SHARED TOKENS
* ============================================
*
* Source of truth for The Long Game Project design system.
* Import this file into any LGP product for shared tokens.
*
* Usage:
*
* or copy into your project and import locally.
*
* Each product sets its own --accent and --accent-lighter variables
* AFTER importing this file to apply its product colour.
*
* Last updated: 2026-03-30
* Docs: /docs/strategy/design-system.md
*/
/* ============================================
FONTS
============================================
Load these in your HTML :
============================================ */
:root {
/* ── Font Families ── */
--font-editorial: 'Newsreader', Georgia, serif;
--font-clear: 'Source Sans 3', 'Source Sans Pro', system-ui, sans-serif;
--font-technical: 'Space Grotesk', system-ui, sans-serif;
--font-mono: 'iA Writer Mono', 'Courier New', monospace;
/* ── Type Scale (1.25 ratio) ── */
--text-xs: 0.64rem; /* 10.24px */
--text-sm: 0.8rem; /* 12.8px */
--text-base: 1rem; /* 16px */
--text-lg: 1.25rem; /* 20px */
--text-xl: 1.563rem; /* 25px */
--text-2xl: 1.953rem; /* 31.25px */
--text-3xl: 2.441rem; /* 39px */
--text-4xl: 3.052rem; /* 48.8px */
--text-5xl: 3.815rem; /* 61px */
/* ── Master Brand Colours ── */
--brand-teal: #1A3A3A;
--brand-teal-light: #2A5454;
--brand-teal-lighter: rgba(26, 58, 58, 0.08);
--brand-amber: #B8860B;
--brand-amber-light: #D4A017;
--brand-amber-lighter: rgba(184, 134, 11, 0.1);
/* ── Product Accent Palette ──
Each product overrides --accent and --accent-lighter.
These are the canonical values per product. */
--accent-shortlist: #4A7C59;
--accent-shortlist-lighter: rgba(74, 124, 89, 0.1);
--accent-insightrpg: #B45309;
--accent-insightrpg-lighter: rgba(180, 83, 9, 0.1);
--accent-prism: #A0522D;
--accent-prism-lighter: rgba(160, 82, 45, 0.1);
--accent-strategysoup: #3D4F5F;
--accent-strategysoup-lighter: rgba(61, 79, 95, 0.1);
/* ── Active Product Accent ──
Override these in your product's CSS:
:root { --accent: var(--accent-shortlist); --accent-lighter: var(--accent-shortlist-lighter); }
Defaults to master brand teal. */
--accent: var(--brand-teal);
--accent-lighter: var(--brand-teal-lighter);
/* ── Light Mode Surfaces ── */
--surface-0: #FAFAF8; /* Page background. Warm white, never pure #FFF. */
--surface-1: #F2F0EC; /* Cards, elevated surfaces. */
--surface-2: #E5E2DC; /* Borders, dividers. */
--surface-3: #D1CCC4; /* Disabled states, tertiary elements. */
/* ── Light Mode Text ── */
--text-primary: #1C1917; /* Near-black, warm undertone. Never pure #000. */
--text-secondary: #57534E; /* Descriptions, secondary content. */
--text-tertiary: #8A8480; /* Captions, metadata, timestamps. AA-safe on surface-0. */
/* ── Semantic Colours ── */
--color-success: #166534;
--color-warning: #92400E;
--color-error: #991B1B;
--color-info: #1E40AF;
/* ── Spacing Scale ── */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
--space-24: 6rem; /* 96px */
--space-32: 8rem; /* 128px */
/* ── Container Widths ── */
--container-sm: 640px; /* Focused reading */
--container-md: 768px; /* Standard content */
--container-lg: 1024px; /* Dashboard layouts */
--container-xl: 1280px; /* Max width, hero sections */
/* ── Border Radius ── */
--radius-sm: 0.25rem; /* 4px - buttons, inputs */
--radius-md: 0.5rem; /* 8px - cards, panels */
--radius-lg: 0.75rem; /* 12px - modals, feature sections */
--radius-full: 9999px; /* Pills, avatars */
}
/* ============================================
DARK MODE
============================================
Activate with:
Or via: @media (prefers-color-scheme: dark) { :root { ... } }
============================================ */
[data-theme="dark"] {
--surface-0: #121210;
--surface-1: #1C1A17;
--surface-2: #2A2724;
--surface-3: #3D3935;
--text-primary: #F5F5F0;
--text-secondary: #A8A29E;
--text-tertiary: #78716C;
--brand-teal: #3A7A7A;
--brand-teal-light: #4A9A9A;
--brand-teal-lighter: rgba(58, 122, 122, 0.12);
--brand-amber: #D4A017;
--brand-amber-light: #E8B82A;
--brand-amber-lighter: rgba(212, 160, 23, 0.1);
--accent-shortlist: #6AAF7A;
--accent-shortlist-lighter: rgba(106, 175, 122, 0.1);
--accent-insightrpg: #D4780A;
--accent-insightrpg-lighter: rgba(212, 120, 10, 0.1);
--accent-prism: #C4724D;
--accent-prism-lighter: rgba(196, 114, 77, 0.1);
--accent-strategysoup: #6A8AA0;
--accent-strategysoup-lighter: rgba(106, 138, 160, 0.1);
}