/* ============================================================ BASE — Design Tokens, Reset, Typography ============================================================ */ /* --- Google Fonts pre-connect (performance) --- */ /* Fonts are linked in the fragment; variables reference them here */ /* --- Design Tokens --- */ :root { /* Color palette — "Warm Stone" (design exploration, see docs/features/ideas/colour-scheme.md) */ --primary: #3F3B36; --accent: #ECE5D9; --accent-hover: #C7BBA6; /* Darkened accent-hover, for use only where accent-hover is a text colour (e.g. emphasised words) — accent-hover itself is ~1.9:1 on white and fails WCAG AA for text; this variant clears 4.5:1 while keeping the same warm-gold hue. Leave --accent-hover untouched for its non-text uses (icon tint, button hover background, dot indicators). */ --accent-hover-text: #7B7467; --bg-base: #FFFFFF; --bg-surface: #FFFFFF; --border-soft: #DBD4C6; --text-main: #46433D; /* #8F897E measured ~3.5:1 on white — fails WCAG AA (4.5:1) for the body/ caption copy this token drives. Darkened to clear AA; still lighter than --text-main so the muted hierarchy is preserved. */ --text-muted: #726B5E; --error: #DC2626; --error-bg: #FEF2F2; --error-border: #FECACA; --success-bg: #F0FDF4; --success-border: #BBF7D0; --success-text: #166534; --color-warning: #F59E0B; /* Status colours retained as named tokens during template presentation remediation. */ --status-cancelled-bg: #FEE2E2; --status-cancelled-text: #991B1B; --status-active-bg: #D1FAE5; --status-active-text: #065F46; --status-warning-bg: #FFFBEB; --status-warning-text: #92400E; --status-warning-border: #FDE68A; --status-warning-strong: #B45309; --status-pending-bg: #FEF3C7; --status-neutral-bg: #F3F4F6; --status-neutral-text: #374151; /* Typography */ --font-serif: 'Playfair Display', Georgia, serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; /* Spacing scale */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; /* Shape */ --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; /* Elevation */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05); /* Transitions */ --transition: 150ms ease; } /* --- Reset --- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* --- Base Element Styles --- */ html { font-size: 16px; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); font-size: 1rem; line-height: 1.6; color: var(--text-main); background-color: var(--bg-base); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif); color: var(--primary); line-height: 1.25; font-weight: 600; } h1 { font-size: 1.875rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.25rem; } p { color: var(--text-main); } a { color: var(--primary); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--accent-hover-text); } img, svg { display: block; max-width: 100%; }