/* ═══════════════════════════════════════════════════════════════════════ COLEMAN & CO. — DESIGN TOKENS The single source of truth for color, typography, spacing, radius, shadow, and motion. Every page (public, member, admin) consumes this. Never hardcode hex / rem / px values in component CSS — pull from here. Naming: --cc--[-] --cc-color-blue brand primary --cc-color-blue-deep pressed / active state --cc-text default ink on light surface --cc-radius-card 16px on every top-level card --cc-shadow-card-hover +6px lift hover state ═══════════════════════════════════════════════════════════════════════ */ :root { /* ─── BRAND COLOR ────────────────────────────────────────────────── */ /* Primary — used on CTAs, links, active states, brand chrome */ --cc-color-blue: #2A3FA8; --cc-color-blue-deep: #1E2D7A; /* pressed / active */ --cc-color-blue-light: #6078EA; /* hover halo, secondary accent */ --cc-color-cyan: #2EB6E0; /* accent strip, highlight */ --cc-color-cyan-light: #17EAD9; /* gradient stop, glow */ /* Tinted-blue surface (for chips, callouts, info panels) */ --cc-tint-blue-bg: rgba(42, 63, 168, 0.06); --cc-tint-blue-bg-hover:rgba(42, 63, 168, 0.10); --cc-tint-blue-border: rgba(42, 63, 168, 0.18); --cc-tint-blue-rule: rgba(42, 63, 168, 0.10); /* ─── INK + SURFACE ──────────────────────────────────────────────── */ /* Text (always on light surface) */ --cc-text: #1A1F2E; --cc-text-dim: rgba(26, 31, 46, 0.78); --cc-text-muted: rgba(26, 31, 46, 0.62); --cc-text-faint: rgba(26, 31, 46, 0.42); /* Light surface stack — warm cream palette (elevated from grey, 2026-06 redesign) */ --cc-surface-bg-top: #F7F4EF; --cc-surface-bg-mid: #F2EDE6; --cc-surface-bg-bot: #EDE6DC; --cc-surface-bg-gradient: linear-gradient(180deg, var(--cc-surface-bg-top) 0%, var(--cc-surface-bg-mid) 48%, var(--cc-surface-bg-bot) 100%); --cc-surface-card: #FFFFFF; --cc-surface-card-soft: #FBF9F6; --cc-surface-elevated: #FFFFFF; /* Rules / hairlines on light surface */ --cc-rule: rgba(26, 31, 46, 0.10); --cc-rule-strong: rgba(26, 31, 46, 0.18); /* ─── STATE COLORS ───────────────────────────────────────────────── */ --cc-color-green: #2E9F7A; --cc-color-amber: #C68A2D; --cc-color-red: #C2435C; --cc-color-success-bg: rgba(46, 159, 122, 0.08); --cc-color-success-border: rgba(46, 159, 122, 0.30); --cc-color-warning-bg: rgba(198, 138, 45, 0.08); --cc-color-warning-border: rgba(198, 138, 45, 0.30); --cc-color-danger-bg: rgba(194, 67, 92, 0.08); --cc-color-danger-border: rgba(194, 67, 92, 0.30); /* ─── DARK SURFACE (for hero photography overlays) ───────────────── */ --cc-dark: #1A1B1B; --cc-dark-deep: #0a0f1c; --cc-on-dark: #FFFFFF; --cc-on-dark-dim: rgba(255, 255, 255, 0.78); --cc-on-dark-muted: rgba(255, 255, 255, 0.62); /* ─── TYPOGRAPHY ─────────────────────────────────────────────────── */ --cc-font-display: 'Marcellus', Georgia, serif; --cc-font-ui: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --cc-font-eyebrow: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --cc-font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; --cc-fs-eyebrow: clamp(10px, 0.65vw + 8px, 12px); --cc-fs-body: clamp(14px, 0.45vw + 12px, 16px); --cc-fs-body-lg: clamp(16px, 0.5vw + 14px, 18px); --cc-fs-h6: clamp(15px, 0.5vw + 13px, 17px); --cc-fs-h5: clamp(17px, 0.7vw + 14px, 21px); --cc-fs-h4: clamp(20px, 1vw + 16px, 26px); --cc-fs-h3: clamp(24px, 1.5vw + 18px, 34px); --cc-fs-h2: clamp(30px, 2.5vw + 20px, 48px); --cc-fs-h1: clamp(40px, 4vw + 24px, 72px); --cc-lh-tight: 1.15; --cc-lh-snug: 1.35; --cc-lh-normal: 1.55; --cc-lh-loose: 1.7; --cc-track-eyebrow: 0.20em; --cc-track-eyebrow-tight: 0.12em; --cc-track-display: -0.01em; --cc-track-body: normal; /* ─── SPACING (8-pt scale) ───────────────────────────────────────── */ --cc-space-1: 4px; --cc-space-2: 8px; --cc-space-3: 12px; --cc-space-4: 16px; --cc-space-5: 20px; --cc-space-6: 24px; --cc-space-7: 32px; --cc-space-8: 40px; --cc-space-9: 56px; --cc-space-10: 80px; --cc-space-11: 120px; /* Outer page gutter — same value used by every page so left/right edges align perfectly between hero, content, footer, etc. */ --cc-gutter: clamp(16px, 3vw, 28px); --cc-content-max: 1680px; --cc-card-gap: 18px; /* ─── RADII ──────────────────────────────────────────────────────── */ --cc-radius-pill: 100px; /* pills, chips, buttons */ --cc-radius-card: 16px; /* every top-level card */ --cc-radius-panel: 12px; /* nested panels inside a card */ --cc-radius-input: 10px; /* form fields */ --cc-radius-tag: 6px; /* small inline tags */ /* ─── SHADOWS ────────────────────────────────────────────────────── */ --cc-shadow-flat: 0 1px 2px rgba(26, 31, 46, 0.04); --cc-shadow-soft: 0 12px 32px rgba(26, 31, 46, 0.08); --cc-shadow-card: 0 6px 20px rgba(26, 31, 46, 0.06); --cc-shadow-lift: 0 18px 44px rgba(26, 31, 46, 0.12); --cc-shadow-modal: 0 32px 80px rgba(26, 31, 46, 0.22); --cc-shadow-focus: 0 0 0 3px rgba(42, 63, 168, 0.22); /* ─── MOTION ─────────────────────────────────────────────────────── */ --cc-ease: cubic-bezier(0.4, 0, 0.2, 1); --cc-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --cc-duration-fast: 0.15s; --cc-duration-base: 0.25s; --cc-duration-slow: 0.4s; /* ─── Z-INDEX ────────────────────────────────────────────────────── */ --cc-z-sticky: 50; --cc-z-overlay: 100; --cc-z-drawer: 200; --cc-z-modal: 300; --cc-z-toast: 400; --cc-z-tooltip: 500; } /* ─── REDUCED MOTION ─────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { :root { --cc-duration-fast: 0s; --cc-duration-base: 0s; --cc-duration-slow: 0s; } }