/* ==========================================================================
Kennedy Mortgage - Design Tokens
==========================================================================
Generated from Visual System Specification v1.
This file defines every design value as a CSS custom property.
Every other stylesheet (base.css, components, page styles) references
these tokens rather than hardcoding values. Change a token here and the
change propagates everywhere.
Font loading: add to the of every page in the WordPress theme:
========================================================================== */
:root {
/* ============================================================
COLORS - Brand
============================================================ */
--color-navy: #18242E;
--color-blue: #3E93CC;
/* ============================================================
COLORS - Extended navy and blue scale
============================================================ */
--color-navy-950: #0E1820;
--color-navy-800: #2A3540;
--color-navy-600: #4A5560;
--color-blue-400: #5AA3D2;
--color-blue-100: #D5E8F0;
--color-blue-50: #EDF4F9;
/* ============================================================
COLORS - Neutral scale
============================================================ */
--color-white: #FFFFFF;
--color-off-white: #FAFAFA;
--color-gray-100: #F2F2F2;
--color-gray-200: #E5E7EB;
--color-gray-400: #9CA3AF;
--color-gray-600: #4B5563;
--color-gray-700: #374151;
--color-gray-900: #111827;
/* ============================================================
COLORS - Semantic
============================================================ */
--color-success: #059669;
--color-error: #DC2626;
/* ============================================================
TYPOGRAPHY - Font families
============================================================ */
--font-heading: 'Sora', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
--font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: 'Courier New', Consolas, Menlo, monospace;
/* ============================================================
TYPOGRAPHY - Sizes (desktop default)
Mobile sizes are overridden in the @media block at the bottom.
============================================================ */
--text-h1: 3rem; /* 48px */
--text-h2: 2.25rem; /* 36px */
--text-h3: 1.5rem; /* 24px */
--text-h4: 1.25rem; /* 20px */
--text-body-lg: 1.25rem; /* 20px */
--text-body: 1rem; /* 16px */
--text-body-sm: 0.875rem; /* 14px */
--text-caption: 0.75rem; /* 12px */
--text-eyebrow: 0.8125rem; /* 13px */
/* ============================================================
TYPOGRAPHY - Weights
============================================================ */
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
/* ============================================================
TYPOGRAPHY - Line heights
============================================================ */
--leading-tight: 1.1;
--leading-snug: 1.15;
--leading-normal: 1.25;
--leading-relaxed: 1.5;
--leading-loose: 1.6;
/* ============================================================
TYPOGRAPHY - Letter spacing
============================================================ */
--tracking-tight: -0.02em;
--tracking-snug: -0.015em;
--tracking-normal: 0;
--tracking-wide: 0.08em;
/* ============================================================
SPACING - 8px base scale
============================================================ */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
--space-3xl: 64px;
--space-4xl: 96px;
--space-5xl: 128px;
/* ============================================================
LAYOUT
============================================================ */
--container-max: 1280px;
--container-narrow: 800px;
--side-padding-mobile-sm: 16px;
--side-padding-mobile: 24px;
--side-padding-tablet: 32px;
--side-padding-desktop: 48px;
/* ============================================================
BORDER RADIUS
============================================================ */
--radius-sm: 4px; /* buttons, inputs */
--radius-md: 6px; /* cards */
--radius-lg: 8px; /* larger surfaces */
/* ============================================================
SHADOWS
============================================================ */
--shadow-sm: 0 1px 2px rgba(24, 36, 46, 0.05);
--shadow-md: 0 4px 6px rgba(24, 36, 46, 0.08);
--shadow-lg: 0 10px 24px rgba(24, 36, 46, 0.12);
/* ============================================================
TRANSITIONS
============================================================ */
--transition-fast: 150ms ease;
--transition: 200ms ease;
--transition-slow: 300ms ease;
/* ============================================================
Z-INDEX scale (for layering modals, menus, etc.)
============================================================ */
--z-dropdown: 100;
--z-sticky: 200;
--z-modal: 300;
--z-toast: 400;
}
/* ==========================================================================
Mobile typography overrides
Below 640px, headings and lead text scale down for readability.
========================================================================== */
@media (max-width: 639px) {
:root {
--text-h1: 2rem; /* 32px */
--text-h2: 1.625rem; /* 26px */
--text-h3: 1.25rem; /* 20px */
--text-body-lg: 1.125rem; /* 18px */
}
}