/* ========================================================================== Woop Design System — ReckonWell Theme Architecture: Woop (shared with Framepath Partners) Theme: ReckonWell — warm terracotta, earthy tones Source: REC-61 grooming decisions (2026-04-07) DO NOT hand-edit token values. Token changes should flow through the Figma Make design system. Production-only additions go in a separate woop-production.css file. ========================================================================== */ :root { /* ── ReckonWell Brand Colors ── These are the raw palette values. Use semantic tokens below for all component styling. Brand tokens exist for reference and for building semantic mappings. */ --rw-ink: #1a1a1a; --rw-paper: #f8f6f1; --rw-warm: #e8e4db; --rw-terracotta: #b5452c; --rw-terracotta-deep: #943c24; --rw-terracotta-light: #e49878; --rw-forest: #2d6a4f; --rw-forest-deep: #266043; --rw-forest-light: #5bb88c; --rw-steel: #3a5a8c; --rw-steel-deep: #2f4d7a; --rw-steel-light: #7dabd4; --rw-muted: #57524c; --rw-footer: #1a1a1a; /* ── Semantic Tokens ── Map brand colors to functional roles. Components should only reference semantic tokens, never raw brand colors. This layer is what makes theming possible — swap the mappings, keep the component CSS identical to Framepath's WOOP. */ /* Surface & Text */ --background: var(--rw-paper); --foreground: var(--rw-ink); --muted: var(--rw-warm); --muted-foreground: var(--rw-muted); --border: var(--rw-divider); --surface-elevated: #ffffff; --surface-inset: #f7f8f9; /* Primary — Terracotta accent */ --primary: var(--rw-terracotta-deep); --primary-vivid: var(--rw-terracotta); --primary-foreground: #ffffff; --primary-on-dark: var(--rw-terracotta-light); --primary-glow: rgba(148, 60, 36, 0.10); /* Wealth Domain — Forest Green */ --wealth: var(--rw-forest-deep); --wealth-vivid: var(--rw-forest); --wealth-foreground: #ffffff; --wealth-on-dark: var(--rw-forest-light); --wealth-bg: rgba(38, 96, 67, 0.06); --wealth-hover: #005a38; --wealth-glow: rgba(38, 96, 67, 0.2); /* Health Domain — Steel Blue */ --health: var(--rw-steel-deep); --health-vivid: var(--rw-steel); --health-foreground: #ffffff; --health-on-dark: var(--rw-steel-light); --health-bg: rgba(47, 77, 122, 0.06); /* Semantic Status Colors */ --success: #1a6b36; --success-bg: rgba(26, 107, 54, 0.08); --warning: #7d5300; --warning-bg: rgba(125, 83, 0, 0.08); --error: #b72525; --error-bg: rgba(183, 37, 37, 0.08); --info: #1b5696; --info-bg: rgba(27, 86, 150, 0.08); /* Destructive (alias for error in interactive contexts) */ --destructive: var(--error); --error-hover: #c82333; /* Health Dividend Domain — Amber */ --dividend: #b45309; --dividend-deep: #92400e; --dividend-vivid: #d97706; --dividend-bg: #fff7ed; /* ── Typography ── */ --font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-family-heading: 'DM Serif Display', Georgia, serif; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* ── Spacing & Layout ── Shared with Framepath WOOP — identical scale ensures components are structurally interchangeable. */ --radius: 0.5rem; --radius-sm: 0.25rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --container-lg: 80rem; --container-md: 64rem; --container-sm: 48rem; /* ── Dividers & Borders ── */ --rw-divider: rgba(26, 26, 26, 0.08); /* ── Focus ── AAA-compliant focus indicators. 3px outline at 2px offset, using primary color for visibility on both light and dark. */ --focus-ring: var(--rw-terracotta-deep); --focus-ring-offset: 2px; --focus-ring-width: 3px; /* ── Shadows ── Warm-toned shadows (not neutral black) to match the warm paper background. */ --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.05); --shadow-md: 0 4px 12px rgba(28, 25, 23, 0.08); --shadow-lg: 0 10px 25px rgba(28, 25, 23, 0.10); /* ── Transitions ── */ --transition-fast: 0.15s ease; --transition-base: 0.2s ease; --transition-slow: 0.3s ease; } /* ── Global Reset ── */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } /* ── Reduced Motion ── Disable transitions and animations for users who prefer reduced motion. Applied globally. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ── Focus Indicator ── AAA-compliant focus ring applied globally. Replaces any outline:none declarations in existing CSS. */ :focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); border-radius: 2px; } /* ========================================================================== Token Migration Map (reference only — not consumed by browser) Old Token → New Token Notes --------------------------------------------------------------------------- --ink → --foreground Semantic alias --paper → --background Semantic alias --warm → --muted Surface variant --accent → --primary Value: #b5452c → #943c24 (AAA) --accent (as fill) → --primary-vivid Keeps #b5452c for fills/large text --accent-light → --primary-on-dark Renamed: only valid on dark bg --accent-glow → --primary-glow Value adjusted to match new primary --retire-color → --wealth Value: #2d6a4f → #266043 (AAA) --retire-color (fill) → --wealth-vivid Keeps #2d6a4f for fills --retire-light → --wealth-on-dark Unified: #307a58/#40916c → #5bb88c --retire-bg → --wealth-bg Same value --well-color → --wealth Value: #3a5a8c → #2f4d7a (AAA) --well-color (fill) → --health-vivid Keeps #3a5a8c for fills --well-light → --health-on-dark Renamed --well-bg → --health-bg Same value --muted → --muted-foreground Semantic alias --divider → --border Semantic alias --serif → --font-family-heading Aligned with WOOP naming --sans → --font-family Aligned with WOOP naming (new) → --success/warning/error/info Decoupled from domain colors (new) → --shadow-sm/md/lg Warm-toned shadows (new) → --focus-ring AAA focus indicators (new) → --transition-fast/base/slow Centralized timing WCAG AAA Contrast Ratios (on --background #f8f6f1): --foreground (#1a1a1a): 16.11:1 ✓ AAA --muted-foreground (#57524c): 7.16:1 ✓ AAA --primary (#943c24): 7.16:1 ✓ AAA --wealth (#266043): 7.40:1 ✓ AAA --health (#2f4d7a): 8.52:1 ✓ AAA WCAG AAA Contrast Ratios (on --foreground #1a1a1a): --primary-on-dark (#e49878): 7.51:1 ✓ AAA --wealth-on-dark (#5bb88c): 7.19:1 ✓ AAA --health-on-dark (#7dabd4): 7.17:1 ✓ AAA ========================================================================== */