/* GENERATED COPY of design-system/tokens.css. Edit that file, then rebuild. */ /* ========================================================================== Design tokens: Group Home By The Dome. Navy and gold are sampled from the client's logo. Contrast is listed in MASTER.md. Components must use these variables, never raw hex values. Fonts are not imported here: set "fonts_url" in site.config.json. ========================================================================== */ :root { /* 1. PRIMITIVE COLORS (components use the semantic colors below) */ --brand-900: #0C2340; --brand-800: #163560; --brand-700: #0C2340; --brand-500: #CCA01D; --brand-400: #E0BE55; --brand-100: #F2ECDD; --brand-600: #1E4470; --brand-ink-900: #0C2340; --brand-ink-700: #3C4A5E; --brand-stone-500: #5C6878; --brand-stone-200: #E2DAC6; --brand-paper-100: #FBF8F1; --brand-paper-50: #FDFBF6; --brand-white: #FFFFFF; --brand-accent-500: #CCA01D; --brand-accent-700: #7A5C08; --brand-warm-600: #A0503A; --brand-red-700: #B42318; --brand-green-700: #2F6B2F; /* 2. SEMANTIC COLORS */ --color-primary: var(--brand-700); --color-primary-hover: var(--brand-800); --color-on-primary: var(--brand-white); --color-secondary: var(--brand-500); --color-on-secondary: var(--brand-ink-900); --color-accent: var(--brand-accent-500); /* highlight fills, never text on white */ --color-on-accent: var(--brand-ink-900); --color-accent-text: var(--brand-accent-700); --color-warm: var(--brand-warm-600); --color-background: var(--brand-paper-100); --color-background-alt: var(--brand-100); --color-surface: var(--brand-white); --color-foreground: var(--brand-ink-900); --color-heading: var(--brand-ink-900); --color-heading-brand: var(--brand-700); --color-card: var(--brand-white); --color-card-foreground: var(--brand-ink-900); --color-muted: var(--brand-100); --color-muted-foreground: var(--brand-ink-700); --color-border: var(--brand-stone-200); /* decorative dividers */ --color-input-border: var(--brand-stone-500); --color-input-bg: var(--brand-white); --color-link: var(--brand-700); --color-link-hover: var(--brand-800); --color-ring: var(--brand-700); --color-destructive: var(--brand-red-700); --color-on-destructive: var(--brand-white); --color-error: var(--brand-red-700); --color-error-bg: #FDF1EF; --color-success: var(--brand-green-700); --color-success-bg: #EEF6EE; --color-footer-bg: var(--brand-900); --color-footer-fg: #D9DEE6; --color-footer-heading: var(--brand-white); --color-footer-divider: rgba(217, 222, 230, 0.25); /* decorative line */ /* 3. TYPOGRAPHY */ --font-heading: 'Newsreader', Georgia, 'Times New Roman', serif; --font-body: 'Atkinson Hyperlegible', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif; --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 */ --text-5xl: clamp(2.75rem, 1.7rem + 4.4vw, 4.75rem); /* 44–76px — home hero, big figures */ --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; --dome-radius-soft: 50% 50% 0 0 / 18% 18% 0 0; /* shallower dome, keeps photo corners */ --scrim-strong: rgba(12, 35, 64, 0.88); /* behind the larger photo view */ --dome-radius: 50% 50% 0 0 / 30% 30% 0 0; /* signature shape: wide, shallow dome */ --dome-radius-tall: 50% 50% 0 0 / 26% 26% 0 0; /* ------------------------------------------------------------------ 7. SHADOWS — soft, warm-tinted ------------------------------------------------------------------ */ --shadow-sm: 0 1px 2px rgba(12, 35, 64, 0.06); --shadow-md: 0 2px 4px rgba(12, 35, 64, 0.06), 0 6px 16px rgba(12, 35, 64, 0.08); --shadow-lg: 0 4px 8px rgba(12, 35, 64, 0.07), 0 14px 32px rgba(12, 35, 64, 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; } }