/* ============================================================================= SARD Design Tokens All color, typography, spacing, and layout values live here. Every color reference in the codebase resolves to a token. No hex values scattered in component or page stylesheets. ============================================================================= */ :root { /* --------------------------------------------------------------------------- Color — Base palette (locked) --------------------------------------------------------------------------- */ --color-ink: #1A2E2A; /* headings, nav, primary text */ --color-paper: #F5F1EA; /* primary background — never pure white */ --color-clay: #E8DFD3; /* secondary surface, section differentiation */ /* --------------------------------------------------------------------------- Color — Accent palette (locked) --------------------------------------------------------------------------- */ --color-terracotta: #B85C3C; /* primary accent, CTAs, emphasis */ --color-ochre: #C89B3C; /* secondary warm accent, data highlights */ /* --------------------------------------------------------------------------- Color — Pillar coding (locked) Used on pillar pages, diagrams, nav markers. --------------------------------------------------------------------------- */ --color-pillar-water: #3A7A7A; /* WASH, Environment */ --color-pillar-field: #5C7A3E; /* Livelihoods */ --color-pillar-brick: #9C4A3C; /* Infrastructure */ --color-pillar-slate: #4A5568; /* Governance, Institutions */ /* --------------------------------------------------------------------------- Color — Derived Derived from the locked palette above. Do not introduce new hex values in component or page stylesheets — add derived tokens here instead. --------------------------------------------------------------------------- */ /* Text hierarchy */ --color-text: var(--color-ink); /* headings, strong UI text */ --color-text-body: #2C4440; /* body paragraphs — ink, slightly lighter */ --color-text-muted: #5E706C; /* captions, labels, helper text */ --color-text-inverse: var(--color-paper); /* text on dark/ink backgrounds */ /* Surfaces */ --color-surface: #FDFAF4; /* cards on paper — lightest cream */ --color-surface-alt: var(--color-clay); /* alternate section bands */ /* Borders */ --color-border: rgba(26, 46, 42, 0.14); /* standard dividers, card outlines */ --color-border-strong: rgba(26, 46, 42, 0.28); /* emphasis borders */ /* Interactive */ --color-focus: var(--color-terracotta); /* focus ring */ --color-link: var(--color-terracotta); /* inline text links */ --color-link-hover: #8F3E21; /* terracotta, darkened ~20% */ /* Absolute white — used for text on filled/colored button and label backgrounds */ --color-white: #ffffff; /* Verification label backgrounds — derived from accent palette */ --color-terracotta-deep: #9E4929; /* terracotta-filled label bg; 6.0:1 contrast vs #fff */ --color-ochre-subtle: #F6EDD4; /* light ochre wash for illustrative label bg */ --color-ochre-text: #7A5A1A; /* dark ochre for text on ochre-subtle; 5.2:1 contrast */ /* --------------------------------------------------------------------------- Typography --------------------------------------------------------------------------- */ --font-heading: 'Fraunces', Georgia, serif; --font-body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', 'Courier New', monospace; /* Type scale — major third (×1.25 ratio), anchored at 18px body minimum. Values given in rem for accessibility (respects user font-size preferences). */ --text-2xs: 0.625rem; /* 10px — verification labels */ --text-xs: 0.75rem; /* 12px — captions, fine print */ --text-sm: 0.875rem; /* 14px — nav links, meta, UI chrome */ --text-base: 1rem; /* 16px — base rem reference */ --text-md: 1.125rem; /* 18px — body text minimum */ --text-lg: 1.375rem; /* 22px — lead / large body */ --text-xl: 1.75rem; /* 28px — h4 / large labels */ --text-2xl: 2.25rem; /* 36px — h3 range */ --text-3xl: 2.875rem; /* 46px — h2 lower bound */ --text-4xl: 3.625rem; /* 58px — h2 upper / h1 lower */ --text-5xl: 4.5rem; /* 72px — h1 desktop maximum */ /* Line heights */ --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.65; --leading-loose: 1.8; /* --------------------------------------------------------------------------- Spacing — 8-point system --------------------------------------------------------------------------- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* --------------------------------------------------------------------------- Layout --------------------------------------------------------------------------- */ --container-max: 1200px; --container-wide: 1440px; --container-narrow: 720px; --nav-height: 72px; --section-pad: var(--space-20); /* default section vertical padding */ --section-pad-lg: var(--space-24); /* generous editorial sections */ /* --------------------------------------------------------------------------- Border radius --------------------------------------------------------------------------- */ --radius-sm: 3px; --radius-md: 6px; --radius-lg: 12px; --radius-xl: 20px; --radius-pill: 999px; /* --------------------------------------------------------------------------- Shadows — ink-toned (not generic black) --------------------------------------------------------------------------- */ --shadow-sm: 0 1px 3px rgba(26, 46, 42, 0.08), 0 1px 2px rgba(26, 46, 42, 0.04); --shadow-md: 0 4px 16px rgba(26, 46, 42, 0.10), 0 2px 4px rgba(26, 46, 42, 0.06); --shadow-lg: 0 12px 32px rgba(26, 46, 42, 0.12), 0 4px 8px rgba(26, 46, 42, 0.06); /* --------------------------------------------------------------------------- Transitions --------------------------------------------------------------------------- */ --transition-fast: 0.15s ease; --transition-base: 0.22s ease; --transition-slow: 0.35s ease; /* --------------------------------------------------------------------------- Z-index scale --------------------------------------------------------------------------- */ --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 500; --z-modal: 1000; }