/* ========================================================================== Design Tokens Source: 08_DESIGN_LANGUAGE/foundations.md ========================================================================== */ :root { /* ------------------------------------------------------------------------- Colour Mode Default: light. Toggle via data-theme="dark" on ------------------------------------------------------------------------- */ color-scheme: light; /* ------------------------------------------------------------------------- Primary Colours (Logo Palette) ------------------------------------------------------------------------- */ --color-red: #851507; --color-teal: #0C6D7E; --color-orange: #D74900; --color-green: #4C7016; --color-purple: #5F266B; /* Logo ring colour (not for text) */ --color-logo-grey: #999999; /* ------------------------------------------------------------------------- Neutral Palette ------------------------------------------------------------------------- */ --color-near-black: #1A1A1A; --color-charcoal: #333333; --color-slate: #5C5C5C; --color-grey: #9A9A9A; --color-light-grey: #E5E5E5; --color-off-white: #F7F7F7; --color-white: #FFFFFF; /* Surface colours (semantic) */ --surface-primary: var(--color-white); --surface-secondary: var(--color-off-white); --surface-inverse: var(--color-near-black); /* Text colours (semantic) */ --text-primary: var(--color-near-black); --text-secondary: var(--color-charcoal); --text-tertiary: var(--color-slate); --text-inverse: var(--color-white); /* ------------------------------------------------------------------------- Tints - Light (85%) for backgrounds, hover states ------------------------------------------------------------------------- */ --color-red-light: #ECDBD9; --color-teal-light: #DAE9EB; --color-orange-light: #F9E3D8; --color-green-light: #E4E9DC; --color-purple-light: #E7DEE8; /* ------------------------------------------------------------------------- Tints - Medium (50%) for borders, secondary buttons, tags ------------------------------------------------------------------------- */ --color-red-medium: #C28A83; --color-teal-medium: #85B6BE; --color-orange-medium: #EBA47F; --color-green-medium: #A5B78A; --color-purple-medium: #AF92B5; /* ------------------------------------------------------------------------- Typography ------------------------------------------------------------------------- */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Type scale */ --text-display: clamp(2.75rem, 5vw + 1rem, 4rem); --text-h1: clamp(2rem, 4vw, 2.5rem); --text-h2: clamp(1.75rem, 3vw, 2.25rem); --text-h3: clamp(1.25rem, 2vw, 1.5rem); --text-body-lg: 1.125rem; --text-body: 1rem; --text-body-sm: 0.875rem; --text-caption: 0.75rem; /* Line heights */ --leading-display: 1.05; --leading-heading: 1.15; --leading-body: 1.65; --leading-tight: 1.4; /* Font weights */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Letter spacing (tracking) */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.01em; /* ------------------------------------------------------------------------- Spacing (8px base) ------------------------------------------------------------------------- */ --space-1: 0.25rem; /* 4px - xs */ --space-2: 0.5rem; /* 8px - sm */ --space-3: 1rem; /* 16px - md */ --space-4: 1.5rem; /* 24px - lg */ --space-5: 2rem; /* 32px - xl */ --space-6: 3rem; /* 48px - 2xl */ --space-7: 4rem; /* 64px - 3xl */ --space-8: 6rem; /* 96px - 4xl */ --space-9: 8rem; /* 128px - 5xl */ /* ------------------------------------------------------------------------- Layout ------------------------------------------------------------------------- */ --max-width: 75rem; /* 1200px */ --max-width-narrow: 42rem; /* ~672px - optimal reading width */ --gutter: var(--space-4); /* 24px */ /* ------------------------------------------------------------------------- Borders & Shadows ------------------------------------------------------------------------- */ --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.1); /* ------------------------------------------------------------------------- Transitions & Animation ------------------------------------------------------------------------- */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1); /* Easing functions */ --ease-out: cubic-bezier(0.0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* ------------------------------------------------------------------------- Header height (for scroll calculations) ------------------------------------------------------------------------- */ --header-height: 4rem; } /* =========================================================================== Dark Mode (manual toggle via data-theme="dark") =========================================================================== */ [data-theme="dark"] { color-scheme: dark; /* Adjusted primaries for dark backgrounds (WCAG AA compliant) */ --color-red: #B47067; --color-teal: #5BA3B0; --color-orange: #E87A3D; --color-green: #7A9B4D; --color-purple: #A585AD; /* Inverted neutrals */ --color-near-black: #F5F5F5; --color-charcoal: #D4D4D4; --color-slate: #A3A3A3; --color-grey: #737373; --color-light-grey: #404040; --color-off-white: #262626; --color-white: #171717; /* Surfaces */ --surface-primary: #171717; --surface-secondary: #1F1F1F; --surface-inverse: #F5F5F5; /* Text */ --text-primary: #F5F5F5; --text-secondary: #D4D4D4; --text-tertiary: #A3A3A3; --text-inverse: #171717; /* Adjusted tints for dark mode */ --color-red-light: #2D1F1D; --color-teal-light: #1A2D30; --color-orange-light: #2D2118; --color-green-light: #222618; --color-purple-light: #261D29; /* Shadows (stronger in dark mode) */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.35); }