/* * Phase 9D foundation: design tokens * Defaults serve as fallback. brand-extractor Hermes skill overrides at composition time * by writing custom values into . * * Token keys per spec §6 + §12 + Gemini SOP convention. */ :root { /* Color, surfaces */ --bg: #ffffff; --card: #f7f7f7; --text: #111111; --muted: #666666; --border: #e0e0e0; /* Color, brand (overridden per prospect by brand-extractor) */ --accent: #1a2744; /* primary, dominant brand color */ --accent-light: #3a4f7a; /* hover/disabled variant */ --accent-fg: #ffffff; /* foreground that reads on --accent */ --secondary: #f59e0b; /* secondary accent */ /* Color, status */ --ok: #16a34a; --warn: #f59e0b; --danger: #dc2626; /* Typography (overridden per prospect by brand-extractor; defaults are safe pairings) */ --font-heading: "Syne", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; --fs-h1: clamp(2.25rem, 5vw, 4rem); --fs-h2: clamp(1.5rem, 3vw, 2.5rem); --fs-h3: 1.5rem; --fs-body: 1rem; --fs-sm: 0.875rem; --fs-xs: 0.75rem; --lh-tight: 1.1; --lh-snug: 1.3; --lh-base: 1.6; /* Spacing scale */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; /* Radii + shadows */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 4px 12px rgba(0,0,0,0.08); --shadow-lg: 0 12px 32px rgba(0,0,0,0.12); /* Layout */ --container-max: 1200px; --container-pad: clamp(1rem, 4vw, 2.5rem); /* Z-index */ --z-sticky: 50; --z-modal: 100; --z-toast: 200; } /* Dark-mode reading is gated on prospect's own brand; brand-extractor sets when needed. */ * { box-sizing: border-box; } html { font-family: var(--font-body); font-size: 16px; line-height: var(--lh-base); color: var(--text); background: var(--bg); } body { margin: 0; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); line-height: var(--lh-tight); color: var(--text); } a { color: var(--accent); } img, video { max-width: 100%; height: auto; display: block; }