/* ========================================================================== STAY FREE ENTERPRISE — design tokens Palette source of truth: HOLLY-MASTER-PLAN.md §2. Zero hex deviation. Governance rules are enforced here at the token level so pages can't violate them by accident (see comments beside each rule). ========================================================================== */ :root { /* ---- brand palette (do not add/rename/alter hexes without a plan update) --- */ --sf-teal: #0E4A3C; /* EMERALD EMPIRE — primary brand (Anthony's palette 2026-07-10) */ /* Deep Teal — structural elements only: rules, nav, icons, anchors (~20% of visual weight) */ --sf-gold: #C6A45C; /* CHAMPAGNE GOLD — secondary brand */ /* Soft Gold — NEVER additive/emissive on ivory. Material only: foil fill, multiply/normal blend, specular sheen, engraved-edge shadow */ --sf-ivory: #FBF8F2; /* IVORY SILK — primary background */ --sf-sand: #F7ECE7; /* BLUSHED PEARL — alternating section background (the girly warmth) */ --sf-charcoal: #2B2926; /* CHARCOAL VELVET — main text, real DOM always */ --sf-taupe: #8A8074; /* SMOKED TAUPE — secondary text, shadow tint */ --sf-coral: #B98B3B; /* GILDED GOLD — CTA accent (coral retired 2026-07-10, Anthony's palette). Still 100% CTA-exclusive; charcoal text (4.7:1 AA). */ --sf-coral-hover: #9E7527; /* ANTIQUE GOLD — CTA hover state only */ /* ---- Extended brand ramp, derived from the 3D logo render (2026-07-10) ---- Sampled family: emerald body tones + gold metal range from the jewelry render. */ --sf-emerald-900: #07271F; /* deepest logo tone; alias of midnight utility */ --sf-emerald-700: #0E4A3C; /* = --sf-teal, the flat-logo body */ --sf-emerald-500: #1A6B57; /* lifted emerald for hovers, icons, active states */ --sf-gold-300: #E3C98B; /* gold highlight (foil gradient light stop) */ --sf-gold-500: #C6A45C; /* = --sf-gold, the script gold */ --sf-gold-700: #8F6F33; /* gold depth (foil gradient shadow stop) */ --sf-enamel: #12181A; /* black enamel from the palm inlays; dark UI accents */ --sf-midnight-teal: #07271F; /* MIDNIGHT EMERALD — dark-section utility, derived from Emerald Empire */ /* Midnight Teal — utility background for the SINGLE dark section (credit-repair reveal). Not a brand color; original additive FX legal only inside it. */ /* ---- WCAG-locked CTA rule (Dana's flag; recolored 2026-07-11) ---- Colorway C "midnight jewel box" per Anthony: champagne gold text on midnight emerald (6.7:1, passes AA normal text). Hover inverts to ivory on emerald (9.6:1). Every CTA component MUST consume these tokens together — never override bg/text independently. On dark surfaces (.sf-section--dark, .sf-footer) base.css adds a gold ring so the midnight fill never sinks into a dark background. */ --sf-cta: var(--sf-midnight-teal); /* semantic alias */ --sf-cta-hover: var(--sf-teal); --sf-error: #B3543E; /* terracotta — form validation only (coral's old error role) */ --sf-cta-bg: var(--sf-midnight-teal); --sf-cta-bg-hover: var(--sf-teal); --sf-cta-text: var(--sf-gold); --sf-cta-text-hover: var(--sf-ivory); /* ---- surface / text roles (semantic aliases, pages consume these, not raw hex) --- */ --sf-bg-primary: var(--sf-ivory); --sf-bg-alt: var(--sf-sand); --sf-bg-dark: var(--sf-midnight-teal); --sf-text-primary: var(--sf-charcoal); --sf-text-secondary: var(--sf-taupe); --sf-text-on-dark: var(--sf-ivory); --sf-rule: var(--sf-teal); /* ---- typography ---- Display serif: Fraunces variable (wght + opsz + SOFT axes in one file). Body/UI: Instrument Sans variable. Script accent: Beau Rivage — ONE use sitewide only (footer wordmark flourish). */ --sf-font-display: 'Playfair Display', 'Iowan Old Style', 'Georgia', serif; /* swapped from Fraunces 2026-07-10: conventional letterforms (Anthony) */ --sf-font-body: 'Instrument Sans', -apple-system, 'Segoe UI', sans-serif; --sf-font-script: 'Beau Rivage', cursive; --sf-fraunces-opsz-hero: 40; /* was 72; lowered so j/J/f/y letterforms stay conventional (Anthony 2026-07-10) */ --sf-fraunces-opsz-body: 14; --sf-fraunces-soft-hero: 60; /* high SOFT = rounded, feminine terminals for hero/display */ --sf-fraunces-soft-stat: 0; /* dialed to 0 for stat/callout precision */ /* ---- modular type scale (1.25 ratio, base 1rem = 16px) ---- */ --sf-ratio: 1.25; --sf-text-xs: 0.64rem; /* ~10.24px */ --sf-text-sm: 0.8rem; /* ~12.8px */ --sf-text-base: 1rem; /* 16px */ --sf-text-md: 1.25rem; /* 20px */ --sf-text-lg: 1.5625rem; /* 25px */ --sf-text-xl: 1.953rem; /* ~31.25px */ --sf-text-2xl: 2.441rem; /* ~39px */ --sf-text-3xl: 3.052rem; /* ~48.8px */ --sf-text-4xl: 3.815rem; /* ~61px */ --sf-text-5xl: 4.768rem; /* ~76.3px */ /* ---- spacing scale (8px base, 1.25 progression) ---- */ --sf-space-1: 0.5rem; /* 8px */ --sf-space-2: 0.75rem; /* 12px */ --sf-space-3: 1rem; /* 16px */ --sf-space-4: 1.5rem; /* 24px */ --sf-space-5: 2rem; /* 32px */ --sf-space-6: 3rem; /* 48px */ --sf-space-7: 4rem; /* 64px */ --sf-space-8: 6rem; /* 96px */ --sf-space-9: 8rem; /* 128px */ --sf-space-10: 10rem; /* 160px */ /* ---- layout ---- */ --sf-max-prose: 42rem; --sf-max-content: 78rem; --sf-radius-sm: 4px; --sf-radius-md: 10px; --sf-radius-lg: 24px; /* ---- shadow system (shadow is to ivory what glow is to obsidian) ---- Soft, blurred, warm-taupe-tinted — object presence, never bloom. */ --sf-shadow-soft: 0 8px 24px -8px rgba(138, 128, 116, 0.28); --sf-shadow-lift: 0 20px 48px -16px rgba(138, 128, 116, 0.32); --sf-shadow-gold-edge: 0 1px 0 0 rgba(212, 177, 90, 0.4); /* ---- soft-shadow PRESENCE SYSTEM (Phase 1 §build task 4) ---- 3 taupe-tinted elevations, never pure black. Elevation 2/3 alias the tokens above (kept for backward compat); elevation-1 is the new lowest tier for resting cards / chips. */ --sf-elevation-1: 0 2px 8px -2px rgba(138, 128, 116, 0.22); --sf-elevation-2: var(--sf-shadow-soft); --sf-elevation-3: var(--sf-shadow-lift); /* ---- motion ---- */ --sf-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* power2.out equivalent */ --sf-dur-fast: 0.28s; --sf-dur-base: 0.5s; --sf-dur-slow: 0.9s; }