/* ========================================================================== Devgun Family Law -- Foundation: Design Tokens Source of truth: docs/design/frontend-build-spec.md Section 1 (values audit-verified against docs/design/figma-refs/tokens.md and the contrast audit in Section 2). Values are copied verbatim -- do not recompute or improvise. Components must consume SEMANTIC tokens only (--color-), never a raw ramp token or a hardcoded hex. ========================================================================== */ :root { /* ------------------------------------------------------------------ * * 1.2 Raw color ramps * ------------------------------------------------------------------ */ /* Green ramp */ --color-green-dark: #1D2B24; /* Dark Green */ --color-green-forest: #3A5648; /* Forest Green */ --color-green-light: #C7D9D0; /* Light Green */ --color-green-lighter: #DEE8E3; /* Lighter Green-2 */ /* Blue ramp */ --color-blue-rich-black: #203134; /* Rich Black */ --color-blue-dark: #2E4C51; /* Dark Blue */ --color-blue-canopy: #5C98A3; /* Canopy Blue */ --color-blue-slate: #496367; /* Slate - primary-button Hover fill (6963:41); not on Color System sheet 7283:493 */ --color-blue-light: #ADCBD1; /* Light Blue */ --color-blue-lighter: #DEEAED; /* Lighter Blue */ --color-blue-lightest: #EEF4F5; /* Lighter Blue-2 */ /* Neutral ramp */ --color-cream: #F9F7F2; /* Cream */ --color-white: #FFFFFF; /* ------------------------------------------------------------------ * * 1.3 Semantic aliases * ------------------------------------------------------------------ */ /* Surfaces */ --color-bg-page: var(--color-white); /* default page bg (Ajay Profile body, CFD body) */ --color-bg-warm: var(--color-cream); /* full-width FAQ section bg - Homepage FAQ 7115:502, CFD FAQ 7138:855, Family Law LP FAQ 7138:665 */ --color-bg-section-green: var(--color-green-forest);/* mid-page intro band on Homepage (Intro 7115:300) + footer */ --color-bg-section-deep: var(--color-blue-dark); /* deep teal practice-area band (Ajay Practice Areas 7146:949, Family Law LP Practice Areas 7138:1285) */ --color-bg-callout: var(--color-green-light); /* "Book a Consultation" callout band - Callout instance on every page (7146:816 etc.) */ --color-bg-card-tint: var(--color-blue-lighter); /* light card surface - Home Key Message cards 7115:319/7118:1251 */ --color-bg-card-green: var(--color-green-lighter);/* green-tint card surface - alt Key Message cards (Family Law LP 7138:637 left card) */ --color-bg-card-dark: var(--color-green-dark); /* dark card (component sheet card-default 7138:1406; Ajay profile-header dark variant) */ --color-bg-card-rail: var(--color-blue-light); /* Light Blue surface - profile header card (Ajay 7146:901) + CFD rail nav (7146:753) */ --color-bg-footer: var(--color-green-forest);/* footer - Footer instance 7138:209 (all pages) */ --color-bg-header: var(--color-blue-rich-black); /* top nav bar - Top Navigation 7138:975 (dark teal-black) */ /* Text */ --color-text-default: var(--color-blue-rich-black); /* body copy on light bg (all body text frames) */ --color-text-heading: var(--color-green-forest); /* section headings on light bg (e.g. "Family Lawyer in Edmonton" 7138:1276, "How Collaborative Divorce Works" 7138:832) */ --color-text-on-dark: var(--color-white); /* text on green/teal/dark surfaces (hero text, footer, dark cards) */ --color-text-muted-on-dark: rgba(255,255,255,0.80); /* secondary text on dark (footer sub-links, hero sub) */ /* Interactive */ --color-action: var(--color-blue-dark); /* primary button fill - matches design (pixel-sampled from every rendered primary button); primary-button 6963:33, practice-area icons use Canopy as accent only */ --color-action-text: var(--color-white); /* button label on Dark Blue */ --color-action-hover: var(--color-blue-slate); /* button hover - primary-button Hover variant 6963:41 = #496367; white label 6.44:1 AA pass. Corrected 2026-07-03 (earlier Canopy read cited wrong node 6963:32) */ --color-link: var(--color-blue-canopy); /* inline links (Links style is bold, see 2.x) */ --color-link-on-dark: var(--color-white); --color-focus-ring: var(--color-blue-canopy); /* focus outline base; see a11y for on-dark override */ /* Lines / dividers */ --color-divider: var(--color-blue-light); /* brand page-break rule line (page-break-brand frames) */ --color-border-subtle: rgba(32,49,52,0.12); /* ------------------------------------------------------------------ * * 1.4 Typography tokens * ------------------------------------------------------------------ */ --font-family-base: 'Red Hat Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; /* clamp(min, preferred[vw-based 375->1440], max=token) - midterms recomputed so the fluid range genuinely spans 375px->1440px: slope_vw = (max_px-min_px)/(1440-375)*100, intercept_rem = (min_px - slope*375px)/16 */ --fs-h1: clamp(2.500rem, 1.972rem + 2.254vw, 4.000rem); /* 40 -> 64px */ --fs-h2: clamp(2.000rem, 1.604rem + 1.690vw, 3.125rem); /* 32 -> 50px */ --fs-h3: clamp(1.750rem, 1.442rem + 1.315vw, 2.625rem); /* 28 -> 42px */ --fs-h4: clamp(1.500rem, 1.236rem + 1.127vw, 2.250rem); /* 24 -> 36px */ --fs-h5: clamp(1.250rem, 1.074rem + 0.751vw, 1.750rem); /* 20 -> 28px */ /* X10: section-band headings (e.g. FaqBlock) -- design ~28px, mirrors the --fs-h5 clamp shape/range (was rendering at --fs-h3, 42px, before this token existed -- verified via computed style, 47.3px at 1280px). */ --fs-section-headline: clamp(1.250rem, 1.074rem + 0.751vw, 1.750rem); /* 20 -> 28px */ --fs-intro:clamp(1.125rem, 1.081rem + 0.188vw, 1.250rem); /* 18 -> 20px */ --fs-body1:clamp(1.000rem, 0.956rem + 0.188vw, 1.125rem); /* 16 -> 18px */ --fs-body2:1.00rem; /* 16px fixed */ --fs-links:clamp(1.000rem, 0.956rem + 0.188vw, 1.125rem); /* 16 -> 18px */ --lh-h1: 1.05; --lh-h2: 1.15; --lh-h3: 1.20; --lh-h4: 1.10; --lh-h5: 1.20; --lh-intro: 1.30; --lh-body1: 1.40; --lh-body2: 1.30; --lh-links: 1.00; /* letter-spacing converted px@size -> em (negative = tightened) */ --ls-h1: -0.02em; /* Figma -2 = -2% (percent, not px: ls=1 renders 0.18px @18px) */ --ls-h2: -0.01em; /* Figma -1 = -1% */ --ls-h3: -0.01em; /* Figma -1 = -1% */ --ls-h4: 0; --ls-h5: -0.01em; /* Figma -1 = -1% (design shows -0.28px @28px) */ --ls-body1: -0.01em; /* Figma -1 = -1% - resolves spec risk R2 (old px-based value was 5x too tight) */ --ls-body2: -0.01em; /* Figma -1 = -1% (design shows -0.16px @16px) */ --ls-links: 0.01em; /* Figma +1 = +1% (design shows 0.18px @18px) */ /* Elevation for interactive card lift states */ --shadow-lift: 0 10px 24px rgba(16, 26, 24, 0.28); /* ------------------------------------------------------------------ * * 1.5 Space / radius / shadow * ------------------------------------------------------------------ */ --space-page-gutter: clamp(1.25rem, 5vw, 3rem); --space-section-y: clamp(3rem, 6vw, 6rem); --space-card: clamp(1.5rem, 3vw, 3.125rem); --space-gap: clamp(1rem, 2vw, 1.875rem); --radius-card: 16px; --radius-image: 16px; --radius-pill: 999px; --radius-input: 8px; --shadow-focus: 0 0 0 3px var(--color-focus-ring); /* ------------------------------------------------------------------ * * Section 6 - breakpoints + container * (custom properties for reference/JS use; media queries in consuming * CSS still need literal px per CSS spec limitations on var() in @media) * ------------------------------------------------------------------ */ --breakpoint-sm: 576px; --breakpoint-md: 768px; --breakpoint-lg: 992px; --breakpoint-xl: 1200px; --breakpoint-xxl: 1650px; --container-max-width: 1408px; }