/* * ShopDPA — Locked design tokens * -------------------------------------------------------------- * SOURCE OF TRUTH for all colors, type, spacing, and motion on * shopdpa.com. Every Bricks element references a token via * var(--token-name). Hex/font/px values are NEVER hardcoded. * * Token-driven visual system — single source of truth for color, * font, and spacing. Clone this file and swap values to rebrand. */ /* -------------------------------------------------- */ /* Variable font imports (Google Fonts — modern fintech) */ /* Outfit = display headlines (geometric, friendly, */ /* modern — VU/Better.com energy, not old serif). */ /* Inter = body (industry-standard fintech sans). */ /* -------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap'); /* -------------------------------------------------- */ /* Tokens */ /* -------------------------------------------------- */ :root { /* ============ COLOR — semantic, not literal ============ */ /* Surfaces */ --c-bg: #FAF7F2; /* page bg — bone white */ --c-bg-alt: #F2EEE6; /* zone separator bg */ --c-surface: #FFFFFF; /* card bg */ --c-surface-alt: #FBF9F5; /* hover-state card bg */ /* Ink */ --c-ink: #1A1A1A; /* primary text */ --c-ink-muted: #6B7785; /* secondary text */ --c-ink-soft: #9AA3AF; /* tertiary / placeholder */ --c-ink-inverse: #FAF7F2; /* text on dark backgrounds */ /* Borders */ --c-border: rgba(2, 33, 78, 0.10); --c-border-strong: rgba(2, 33, 78, 0.20); /* Brand — primary navy (v1.19.0 — VU-HSL-aligned for true-blue chroma) * hue 216°, saturation 95%, lightness 16% — matches Veterans United's * blue family while staying distinct from their exact #001941. */ --c-primary: #02214E; /* hsl(216, 95%, 16%) — true blue navy */ --c-primary-hover: #011338; /* hsl(217, 95%, 11%) */ --c-primary-soft: rgba(2, 33, 78, 0.06); --c-primary-tint: rgba(2, 33, 78, 0.12); --c-primary-deep: #000C24; /* hsl(218, 100%, 7%) — footer / deepest accents */ --c-primary-mid: #033078; /* NEW v1.19.0 — mid blue for accent strips, callouts, secondary surfaces */ /* Brand — action blue (NEW v1.19.0 — the third blue VU uses for links + secondary buttons. * Distinct from --c-primary (anchor) and --c-accent (CTA). hsl(218, 95%, 49%). */ --c-action: #0B5DEF; --c-action-hover: #0848C2; --c-action-soft: rgba(11, 93, 239, 0.10); /* Brand — accent amber (v1.19.0 — VU-HSL-aligned: hue 45°, sat 100%, light 58%) */ --c-accent: #FFC528; /* True yellow-amber, VU-grade saturation */ --c-accent-hover: #F5A700; /* Deeper for hover state */ --c-accent-soft: rgba(255, 197, 40, 0.18); --c-accent-tint: rgba(255, 197, 40, 0.30); --c-accent-glow: rgba(255, 197, 40, 0.45); /* For shadow + glow effects */ /* Brand — secondary teal (kept) */ --c-secondary: #1AA4A4; /* Texas-trust teal */ --c-secondary-hover: #138787; --c-secondary-soft: rgba(26, 164, 164, 0.14); /* Gradient stops — v1.19.0 amber stops re-tuned to new yellow-amber family */ --grad-amber: linear-gradient(135deg, #FFD96B 0%, #FFC528 50%, #F5A700 100%); --grad-navy: linear-gradient(135deg, #02214E 0%, #000C24 100%); --grad-amber-glow: radial-gradient(circle at 50% 50%, rgba(255, 197, 40, 0.35) 0%, transparent 70%); /* Status */ --c-success: #2E7D5B; --c-success-soft: rgba(46, 125, 91, 0.10); --c-warning: #C77B16; --c-warning-soft: rgba(199, 123, 22, 0.12); --c-danger: #B53A36; --c-danger-soft: rgba(181, 58, 54, 0.10); --c-info: #0B5DEF; /* v1.19.0 — repointed to new action blue */ --c-info-soft: rgba(11, 93, 239, 0.10); /* Focus ring (accessibility — WCAG 2.2 §2.4.7 + 2.4.13) */ --c-focus: #0B5DEF; /* v1.19.0 — matches action blue */ --ring-focus: 0 0 0 3px rgba(11, 93, 239, 0.45); /* ============ TYPOGRAPHY ============ */ --font-heading: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace; /* Type scale — modular 1.250 (Major Third), base 16px */ --fs-3xs: 0.625rem; /* 10px — fine print: source citations, legal disclosures, refresh-date stamps */ --fs-2xs: 0.6875rem; /* 11px — micro-copy: footnotes, secondary captions */ --fs-xs: 0.75rem; /* 12px */ --fs-sm: 0.875rem; /* 14px */ --fs-base: 1rem; /* 16px */ --fs-md: 1.125rem; /* 18px */ --fs-lg: 1.25rem; /* 20px — h4 */ --fs-xl: 1.563rem; /* 25px — h3 */ --fs-2xl: 1.953rem; /* 31px — h2 */ --fs-3xl: 2.441rem; /* 39px — h1 (default) */ --fs-4xl: 3.052rem; /* 49px — hero h1 */ --fs-5xl: 3.815rem; /* 61px — display */ /* Line heights */ --lh-tight: 1.15; /* display + h1 */ --lh-snug: 1.25; /* h2-h4 */ --lh-normal: 1.55; /* body */ --lh-relaxed: 1.7; /* long-form body */ /* Type weights */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Letter-spacing */ --tr-tight: -0.02em; /* display H1 */ --tr-snug: -0.01em; /* H2/H3 */ --tr-normal: 0; --tr-wide: 0.04em; /* small caps */ --tr-wider: 0.12em; /* eyebrow labels */ /* ============ SPACING — 8px grid ============ */ --sp-0: 0; --sp-half: 0.25rem; /* 4px */ --sp-1: 0.5rem; /* 8px */ --sp-2: 1rem; /* 16px */ --sp-3: 1.5rem; /* 24px */ --sp-4: 2rem; /* 32px */ --sp-5: 3rem; /* 48px */ --sp-6: 4rem; /* 64px */ --sp-7: 6rem; /* 96px */ --sp-8: 8rem; /* 128px */ --sp-9: 12rem; /* 192px */ /* ============ RADII ============ */ --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px; /* ============ ELEVATION (subtle, not floaty — v1.19.0 navy rgba updated) ============ */ --elev-1: 0 1px 2px rgba(2, 33, 78, 0.04), 0 1px 3px rgba(2, 33, 78, 0.06); --elev-2: 0 2px 4px rgba(2, 33, 78, 0.06), 0 4px 8px rgba(2, 33, 78, 0.08); --elev-3: 0 4px 8px rgba(2, 33, 78, 0.08), 0 8px 16px rgba(2, 33, 78, 0.10); /* ============ CONTAINER WIDTHS ============ */ --max-w-content: 780px; /* article body — optimal reading measure (was 720, widened for breathing room) */ --max-w-page: 1340px; /* default page container (was 1200, widened so zone text spreads more on desktop) */ --max-w-wide: 1480px; /* full-bleed sections (was 1440, matches new spread) */ /* v1.18.10 — canonical container padding + TOC reservation tokens. * EVERY zone .container uses --container-pad. Pillar pages reserve * --toc-reservation horizontal space for the floated TOC sidebar. */ --container-pad: clamp(16px, 4vw, 32px); /* horizontal padding for all .container */ --toc-reservation: 400px; /* TOC width + gap on pillar pages ≥1100px */ /* ============ MOTION ============ */ --t-fast: 120ms; --t-base: 200ms; --t-slow: 320ms; --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* ============ Z-INDEX ============ */ --z-base: 1; --z-sticky: 100; --z-header: 500; --z-overlay: 900; --z-modal: 1000; --z-toast: 1100; } /* -------------------------------------------------- */ /* Reduced motion preference */ /* -------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms; } } /* -------------------------------------------------- */ /* Dark mode tokens — reserved for future, not active */ /* -------------------------------------------------- */ /* @media (prefers-color-scheme: dark) { :root { --c-bg: #02214E; --c-bg-alt: #011338; --c-surface: #033078; --c-ink: #FAF7F2; --c-ink-muted: #B0BAC6; } } */