/* ========================================================================== Fuller Living — Design Tokens (CSS Custom Properties) -------------------------------------------------------------------------- The single source of truth for the Fuller Living Experience Guide's visual language: color, typography, spacing, radius, shadow, and motion. Structure (three layers): 1. PRIMITIVES — the raw brand palette, exactly as the guide specifies. 2. SEMANTIC — role-based tokens (bg, ink, link, surface, focus...). Components should reference THESE, never raw hex. 3. SCALES — spacing, radius, shadow, motion, layout, z-index. Accessibility note: the raw brand teal, sage, and periwinkle do NOT meet WCAG AA (4.5:1) as small text on Cream — they pass only as large text or fills. So each has a darkened "-strong" variant, verified >= 4.5:1 on Cream, for use as link/label/body-level text. Fills and large display use the brand hues; text uses the strong variants. Contrast ratios are noted. Palette ratio target (from the guide): Cream 60% · Navy 20% · Teal 10% · Sage 7% · Periwinkle 2% · Mauve 1% ========================================================================== */ :root { /* ====================================================================== 1. PRIMITIVE PALETTE — the brand colors, verbatim from the guide ====================================================================== */ --fl-navy: #1B2A4A; /* Stability, wisdom, trust — headings, nav, footer */ --fl-teal: #2E8B8B; /* Renewal, presence — buttons, links, interactive */ --fl-sage: #6D9474; /* Restoration, nature — cards, accents, success */ --fl-periwinkle: #6B7FBF; /* Reflection, depth — domain cards, callouts */ --fl-cream: #FAF8F5; /* Warmth, paper — the primary background. Not white. */ --fl-mauve: #C4A0B8; /* Compassion, grace — decorative accent only (~1%) */ /* Accessible text-safe variants (>= 4.5:1 on Cream) --------------------- */ --fl-teal-strong: #1F7A7A; /* link / label text ~4.9:1 */ --fl-teal-deep: #185E5E; /* button base, hover, active ~7.0:1 */ --fl-sage-strong: #4E7358; /* success text, accents ~5.0:1 */ --fl-periwinkle-strong: #4A5C9E; /* educational callout text ~5.9:1 */ --fl-clay: #9E4A34; /* gentle error/danger ~5.6:1 */ /* Warm neutrals derived from Navy + Cream (never pure black/white) ------ */ --fl-ink: #1B2A4A; /* body + heading ink (Navy) ~12.6:1 on Cream */ --fl-ink-muted: #4A5568; /* secondary text ~6.8:1 */ --fl-ink-subtle: #6B7280; /* meta / captions ~4.6:1 */ --fl-surface: #FFFDFA; /* raised cards — warm off-white, never #FFF */ --fl-surface-sunk:#F3EFE9; /* wells, insets, alt sections */ --fl-hairline: rgba(27, 42, 74, 0.10); /* borders / dividers on cream */ --fl-hairline-strong: rgba(27, 42, 74, 0.16); /* Soft tinted surfaces for cards / callouts (large fills, on-brand) ----- */ --fl-teal-tint: #E6F0EF; --fl-sage-tint: #EBF0EB; --fl-periwinkle-tint: #ECEEF6; --fl-mauve-tint: #F4ECF1; --fl-navy-tint: #E7EAF0; /* ====================================================================== 2. SEMANTIC TOKENS — reference these in components, not raw hex above ====================================================================== */ /* Backgrounds & surfaces */ --color-bg: var(--fl-cream); --color-bg-alt: var(--fl-surface-sunk); --color-surface: var(--fl-surface); --color-surface-raised: var(--fl-surface); --color-footer-bg: var(--fl-navy); /* Text / ink */ --color-ink: var(--fl-ink); --color-heading: var(--fl-navy); --color-text: var(--fl-ink); --color-text-muted: var(--fl-ink-muted); --color-text-subtle: var(--fl-ink-subtle); --color-text-on-navy: var(--fl-cream); --color-text-on-teal: #FFFFFF; /* Links & interactive */ --color-link: var(--fl-teal-strong); --color-link-hover: var(--fl-teal-deep); --color-interactive: var(--fl-teal); /* Primary action (buttons) — teal-deep base guarantees AA with white text */ --color-btn-bg: var(--fl-teal-deep); --color-btn-bg-hover: #124A4A; --color-btn-text: #FFFFFF; --color-btn-secondary-bg: transparent; --color-btn-secondary-text: var(--fl-teal-deep); --color-btn-secondary-border: var(--fl-teal-deep); /* Borders & lines */ --color-border: var(--fl-hairline); --color-border-strong: var(--fl-hairline-strong); /* Focus — always visible, teal ring with offset (accessibility = grace) */ --color-focus: var(--fl-teal-deep); --focus-ring: 0 0 0 3px rgba(24, 94, 94, 0.45); --focus-ring-width: 3px; --focus-ring-offset: 2px; /* Feedback states (always paired with an icon/text, never color alone) */ --color-success: var(--fl-sage-strong); --color-success-bg: var(--fl-sage-tint); --color-info: var(--fl-periwinkle-strong); --color-info-bg: var(--fl-periwinkle-tint); --color-danger: var(--fl-clay); --color-danger-bg: #F6E9E5; /* Domain-card accents (the Seven Domains) ------------------------------ */ --color-domain-accent: var(--fl-periwinkle); --color-domain-bg: var(--fl-periwinkle-tint); --color-accent-grace: var(--fl-mauve); /* ====================================================================== 3a. TYPOGRAPHY ====================================================================== */ /* Families — brand fonts with graceful, on-brand system fallbacks */ --font-heading: "Playfair Display", Georgia, "Times New Roman", serif; --font-body: "Lora", Georgia, Cambria, "Times New Roman", serif; --font-ui: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Font weights (Lato static = 300/400/700; serif variables = 400–700/900) */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; /* serif only (variable); Lato rounds to 400 */ --fw-semibold: 600; /* serif only (variable); Lato rounds to 700 */ --fw-bold: 700; /* Fluid type scale — mobile-first, scales up with viewport. Body sits at 18–20px per the guide (never below 16px on mobile). */ --text-eyebrow: 0.8125rem; /* 13px labels */ --text-sm: 0.9375rem; /* 15px meta */ --text-base: clamp(1.125rem, 1.06rem + 0.28vw, 1.25rem); /* 18 → 20px */ --text-lg: clamp(1.25rem, 1.18rem + 0.35vw, 1.4rem); /* 20 → 22.4px */ --text-h4: clamp(1.25rem, 1.16rem + 0.45vw, 1.5rem); /* 20 → 24px */ --text-h3: clamp(1.5rem, 1.35rem + 0.75vw, 2rem); /* 24 → 32px */ --text-h2: clamp(1.875rem, 1.6rem + 1.35vw, 2.75rem); /* 30 → 44px */ --text-h1: clamp(2.25rem, 1.75rem + 2.45vw, 3.75rem); /* 36 → 60px */ --text-display: clamp(2.6rem, 1.85rem + 3.6vw, 4.5rem); /* 41.6 → 72px */ /* Line heights — generous, per the guide (body 1.7–1.9) */ --leading-display: 1.1; --leading-heading: 1.22; --leading-snug: 1.4; --leading-body: 1.8; --leading-relaxed: 1.9; /* Letter spacing — restrained; slight negative on large serif headings */ --tracking-display: -0.015em; --tracking-heading: -0.01em; --tracking-normal: 0; --tracking-wide: 0.08em; /* eyebrows / small UI labels only */ /* Reading measure (line length 65–75 chars) */ --measure: 68ch; --measure-narrow: 58ch; /* ====================================================================== 3b. SPACING — 8pt rhythm, generous (whitespace is breathing room) ====================================================================== */ --space-3xs: 0.25rem; /* 4px */ --space-2xs: 0.5rem; /* 8px */ --space-xs: 0.75rem; /* 12px */ --space-sm: 1rem; /* 16px */ --space-md: 1.5rem; /* 24px */ --space-lg: 2rem; /* 32px */ --space-xl: 3rem; /* 48px */ --space-2xl: 4rem; /* 64px */ --space-3xl: 6rem; /* 96px */ --space-4xl: 8rem; /* 128px */ /* Vertical rhythm between page sections — fluid, roomy, never crowded */ --section-gap: clamp(3.5rem, 2.4rem + 5vw, 7rem); --section-gap-tight: clamp(2.5rem, 1.9rem + 3vw, 4.5rem); /* ====================================================================== 3c. LAYOUT ====================================================================== */ --content-max: 1200px; /* desktop max content width (per the guide) */ --content-wide: 1320px; /* full-bleed feature rows */ --content-narrow: 720px; /* long-form reading column */ --container-pad: clamp(1.25rem, 0.85rem + 1.7vw, 2.5rem); /* gutters */ /* ====================================================================== 3d. CORNER RADIUS — nothing should feel sharp (guide values) ====================================================================== */ --radius-sm: 10px; --radius-button: 14px; /* 12–16 */ --radius-form: 16px; /* inputs */ --radius-card: 22px; /* 20–24 */ --radius-image: 24px; --radius-container: 28px; /* 24–32 */ --radius-pill: 999px; /* ====================================================================== 3e. SHADOWS — soft, diffuse, almost invisible (navy-tinted, low alpha) ====================================================================== */ --shadow-xs: 0 1px 2px rgba(27, 42, 74, 0.04); --shadow-sm: 0 2px 8px rgba(27, 42, 74, 0.05); --shadow-card: 0 4px 18px rgba(27, 42, 74, 0.055); --shadow-md: 0 8px 24px rgba(27, 42, 74, 0.07); --shadow-lg: 0 16px 40px rgba(27, 42, 74, 0.09); /* ====================================================================== 3f. MOTION — animation should feel like breathing (200–400ms) ====================================================================== */ --duration-fast: 200ms; --duration-base: 300ms; --duration-slow: 400ms; --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* gentle settle */ --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-soft: cubic-bezier(0.37, 0, 0.63, 1); /* breathing curve */ --lift-hover: -3px; /* gentle card/button lift on hover */ /* ====================================================================== 3g. Z-INDEX SCALE ====================================================================== */ --z-base: 1; --z-dropdown: 10; --z-sticky: 100; --z-header: 200; --z-overlay: 1000; --z-modal: 1100; --z-toast: 1200; }