/* GENERATED COPY of design-system/tokens.css. Edit that file, then rebuild. */ /* ========================================================================== Divine Mercy Home — Design Tokens Source of truth: design-system/MASTER.md Generated with the UI UX Pro Max workflow (style, spacing, a11y, motion rules) + brand overrides taken from the Divine Mercy Home trifold brochure (colors, heading font). See design-system/README.md for provenance. Usage: load this file BEFORE any page/component CSS, e.g. or copy it to assets/css/ during the build. Components must reference these variables — never raw hex values or ad-hoc sizes. Fonts are NOT imported here (a CSS @import blocks rendering). Load them in each page — see MASTER.md §3 "Typography". ========================================================================== */ :root { /* ------------------------------------------------------------------ 1. PRIMITIVE COLORS (brand palette — do not use directly in components) Values marked [brochure] were sampled from the brochure PDF. ------------------------------------------------------------------ */ --dmh-olive-900: #2F3524; /* deepest olive — footer background */ --dmh-olive-800: #3B4A0E; /* primary hover/pressed */ --dmh-olive-700: #4A5D12; /* primary (accessible deepening of brochure olive) */ --dmh-olive-500: #778F24; /* [brochure] logo/heading olive — decorative & large text only */ --dmh-sage-400: #8D9964; /* [brochure] sage — decorative only */ --dmh-sage-100: #EEF0E4; /* sage tint — alternating section background */ --dmh-darkolive: #515440; /* [brochure] dark olive text */ --dmh-ink-900: #2B2F22; /* body text */ --dmh-ink-700: #4D5240; /* secondary text */ --dmh-stone-500: #6B705C; /* form control borders (non-text, ≥3:1) */ --dmh-stone-200: #DCD8CE; /* decorative dividers */ --dmh-cream-100: #F6F3F0; /* [brochure] warm cream page background */ --dmh-cream-50: #FBF9F6; /* lighter cream — input fill */ --dmh-white: #FFFFFF; --dmh-gold-500: #CDA11F; /* halo / screenshot button gold — fills only, dark text on it */ --dmh-gold-700: #8A5A12; /* gold for text on light backgrounds */ --dmh-terracotta-600: #A0503A; /* watercolor roof/heart warmth */ --dmh-red-700: #B42318; /* error */ --dmh-green-700: #2F6B2F; /* success */ /* ------------------------------------------------------------------ 2. SEMANTIC COLORS (use these in components) Names follow the UI UX Pro Max --color-* convention. Contrast ratios verified with WCAG 2.x formula (see MASTER.md §2). ------------------------------------------------------------------ */ --color-primary: var(--dmh-olive-700); /* 7.33:1 on white */ --color-primary-hover: var(--dmh-olive-800); /* 9.67:1 white on it */ --color-on-primary: var(--dmh-white); --color-secondary: var(--dmh-olive-500); /* decorative / ≥24px text only (3.66:1) */ --color-on-secondary: var(--dmh-white); /* large text only */ --color-accent: var(--dmh-gold-500); /* highlight fills, never text on white */ --color-on-accent: var(--dmh-ink-900); /* 5.69:1 */ --color-accent-text: var(--dmh-gold-700); /* 5.91:1 on white */ --color-warm: var(--dmh-terracotta-600); /* 5.67:1 on white */ --color-background: var(--dmh-cream-100); --color-background-alt: var(--dmh-sage-100); --color-surface: var(--dmh-white); --color-foreground: var(--dmh-ink-900); /* 12.40:1 on cream */ --color-heading: var(--dmh-ink-900); --color-heading-brand: var(--dmh-olive-700); --color-card: var(--dmh-white); --color-card-foreground: var(--dmh-ink-900); --color-muted: var(--dmh-sage-100); --color-muted-foreground: var(--dmh-ink-700); /* 7.32:1 on cream */ --color-border: var(--dmh-stone-200); /* decorative dividers */ --color-input-border: var(--dmh-stone-500); /* 5.13:1 on white */ --color-input-bg: var(--dmh-white); --color-link: var(--dmh-olive-700); --color-link-hover: var(--dmh-olive-800); --color-ring: var(--dmh-olive-700); --color-destructive: var(--dmh-red-700); /* 6.57:1 on white */ --color-on-destructive: var(--dmh-white); --color-error: var(--dmh-red-700); --color-error-bg: #FDF1EF; --color-success: var(--dmh-green-700); /* 6.43:1 on white */ --color-success-bg: #EEF6EE; --color-footer-bg: var(--dmh-olive-900); --color-footer-fg: #E9EBDD; /* 10.51:1 on footer bg */ --color-footer-heading: var(--dmh-white); /* 12.68:1 */ --color-footer-divider: rgba(233, 235, 221, 0.25); /* decorative line */ /* ------------------------------------------------------------------ 3. TYPOGRAPHY Headings: Lora (used in the brochure) — warm, faith-appropriate serif. Body: Atkinson Hyperlegible (UI UX Pro Max accessibility pick). ------------------------------------------------------------------ */ --font-heading: 'Lora', Georgia, 'Times New Roman', serif; --font-body: 'Atkinson Hyperlegible', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif; /* Base is 18px: larger than the 16px minimum, for an older audience. */ --font-size-root: 100%; /* respect browser setting */ --text-sm: 1rem; /* 16px — smallest allowed */ --text-base: 1.125rem; /* 18px — body */ --text-lg: 1.25rem; /* 20px — lead paragraphs */ --text-xl: 1.5rem; /* 24px — h4 / card titles */ --text-2xl: clamp(1.625rem, 1.35rem + 1.2vw, 2rem); /* 26–32px — h3 */ --text-3xl: clamp(1.875rem, 1.45rem + 1.9vw, 2.5rem); /* 30–40px — h2 */ --text-4xl: clamp(2.25rem, 1.6rem + 2.9vw, 3.5rem); /* 36–56px — h1 / hero */ --leading-tight: 1.2; /* headings */ --leading-snug: 1.35; /* card titles */ --leading-body: 1.65; /* paragraphs (skill: 1.5–1.75) */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --tracking-normal: 0; --tracking-eyebrow: 0.08em; /* small uppercase labels only */ --measure: 68ch; /* max line length for prose (skill: 65–75) */ /* ------------------------------------------------------------------ 4. SPACING — UI UX Pro Max density 3/10 "Spacious" scale (+ one 16px step) ------------------------------------------------------------------ */ --space-xs: 0.25rem; /* 4px */ --space-sm: 0.5rem; /* 8px */ --space-ms: 1rem; /* 16px — added: label↔input, list gaps */ --space-md: 1.5rem; /* 24px */ --space-lg: 2rem; /* 32px */ --space-xl: 3rem; /* 48px */ --space-2xl: 4rem; /* 64px */ --space-3xl: 6rem; /* 96px */ --section-padding-y: clamp(var(--space-xl), 6vw, var(--space-3xl)); /* ------------------------------------------------------------------ 5. LAYOUT Breakpoints (for reference — CSS can't use variables inside @media): sm 375px · md 768px · lg 1024px · xl 1440px (mobile-first, min-width) ------------------------------------------------------------------ */ --container-max: 75rem; /* 1200px */ --container-narrow: 45rem; /* 720px — long text, contact form */ --gutter: clamp(1rem, 4vw, 2rem); /* 16–32px side padding */ --grid-gap: var(--space-md); --header-height: 4.5rem; /* 72px — reserve for sticky header */ /* ------------------------------------------------------------------ 6. BORDERS & RADII — Soft UI Evolution (8–12px) ------------------------------------------------------------------ */ --border-width: 1px; --border-width-input: 2px; /* thicker for visibility */ --radius-sm: 6px; --radius-md: 10px; /* buttons, inputs */ --radius-lg: 16px; /* cards, images */ --radius-pill: 999px; /* ------------------------------------------------------------------ 7. SHADOWS — soft, warm-tinted (ink #2B2F22) ------------------------------------------------------------------ */ --shadow-sm: 0 1px 2px rgba(43, 47, 34, 0.06); --shadow-md: 0 2px 4px rgba(43, 47, 34, 0.06), 0 6px 16px rgba(43, 47, 34, 0.08); --shadow-lg: 0 4px 8px rgba(43, 47, 34, 0.07), 0 14px 32px rgba(43, 47, 34, 0.10); /* ------------------------------------------------------------------ 8. FOCUS & INTERACTION — Accessible & Ethical style ------------------------------------------------------------------ */ --focus-ring-width: 3px; --focus-ring-offset: 3px; --focus-ring-color: var(--color-ring); --focus-ring: var(--focus-ring-width) solid var(--focus-ring-color); --touch-target-min: 48px; /* ≥44px required; 48px chosen */ --input-height: 3.25rem; /* 52px */ --button-height: 3.25rem; /* 52px */ --disabled-opacity: 0.5; /* ------------------------------------------------------------------ 9. MOTION — dial 2/10 "Subtle" ------------------------------------------------------------------ */ --duration-fast: 150ms; /* color/border changes */ --duration-base: 220ms; /* hover, shadow */ --duration-slow: 350ms; /* section fade-in */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1); --reveal-distance: 12px; /* ------------------------------------------------------------------ 10. ICONS — Phosphor "regular" outline (inline SVG) ------------------------------------------------------------------ */ --icon-sm: 20px; --icon-md: 24px; --icon-lg: 32px; --icon-feature: 40px; /* service card icons */ /* ------------------------------------------------------------------ 11. Z-INDEX SCALE ------------------------------------------------------------------ */ --z-base: 0; --z-raised: 10; --z-sticky: 40; /* header */ --z-overlay: 100; /* mobile nav panel */ --z-skip: 1000; /* skip link */ } /* Reduced motion: remove non-essential movement globally. */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; --reveal-distance: 0px; } }