/* WFG Wealth Management — Design Tokens Single source of truth for all CSS custom properties. WordPress port: enqueue this file via wp_enqueue_style(). Static HTML: referenced via in . */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600&display=swap'); :root { /* Primary palette */ --color-navy: #0E1B2C; --color-navy-deep: #081320; --color-navy-soft: #1B2A3F; /* Gold (accent) */ --color-gold: #C9A862; --color-gold-light: #C9A862; --color-gold-deep: #B08D3C; /* Surface colors */ --color-cream: #FAF7F1; --color-cream-warm: #F4EFE5; --color-paper: #FFFFFF; /* Structural */ --color-rule: #E5DFD2; --color-text: #0E1B2C; --color-text-muted: #5A6577; --color-text-soft: #8A93A1; /* Semantic (Income Planner) */ --green: #2e7d52; --red: #9d3e3e; /* Typography */ --font-display: "Instrument Serif", Georgia, serif; --font-body: "DM Sans", "Inter", -apple-system, BlinkMacSystemFont, sans-serif; /* Type scale */ --fs-display-xl: clamp(3rem, 7vw, 6.5rem); --fs-display-lg: clamp(2.5rem, 5vw, 4.5rem); --fs-display-md: clamp(2rem, 3.5vw, 3rem); --fs-display-sm: clamp(1.5rem, 2.5vw, 2rem); --fs-body-lg: 1.125rem; --fs-body: 1rem; --fs-body-sm: 0.9375rem; --fs-caption: 0.8125rem; --fs-micro: 0.6875rem; /* Container widths */ --container-wide: 1280px; --container-default: 1080px; --container-narrow: 720px; --container-prose: 680px; /* Letter spacing */ --tracking-display: -0.02em; --tracking-tight: -0.01em; --tracking-eyebrow: 0.18em; --tracking-wide: 0.08em; /* Borders */ --border-hairline: 1px solid var(--color-rule); /* Animation */ --duration-fast: 180ms; --duration-base: 280ms; --duration-grand: 900ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* ===== Accessibility utilities ===== */ .sr-only{ position:absolute; width:1px;height:1px; padding:0;margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .skip-link{ position:absolute; top:-40px; left:1rem; z-index:1000; background:var(--color-navy); color:var(--color-cream); padding:0.625rem 1rem; font-family:var(--font-body); font-size:var(--fs-caption); font-weight:500; letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; text-decoration:none; border-radius:2px; transition:top 180ms ease-out; } .skip-link:focus{ top:0.75rem; outline:2px solid var(--color-gold); outline-offset:2px; }