/* ============================================================ Portal design tokens. Per-client branding: set these colors + the fonts in each page's per build. ============================================================ */ :root { /* Mountain Landscapers brand — pulled from mtnlandscapers.com */ --brand: #21382c; /* forest */ --brand-soft: #2d483b; /* pine */ --brand-deep: #132018; /* forest-950 */ --ink: #1c211d; --body: #565e57; /* ink-soft */ --muted: #6b736b; --bg: #f7f5ef; /* cream */ --bg-alt: #efece2; /* cream-2 */ --card-bone: #fdfcf8; --line: #e4e1d8; --accent: #d99e2b; /* amber */ --accent-hover: #c48c1d; /* amber-hover */ --leaf: #426e34; --leaf-hover: #35592a; --on-brand: #e8efe9; --border-ondark: rgba(255, 255, 255, 0.08); --highlight-ondark: rgba(255, 255, 255, 0.06); /* Quote/margin semantics — the Present Mode margin dot reads from these */ --ok: #2f7d32; --warn: #b8860b; --danger: #a32020; --cost-tint: #f3f0e6; /* background wash behind internal-only cost cells */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --shadow-1: 0 1px 3px rgba(24, 15, 47, 0.07), 0 1px 2px rgba(24, 15, 47, 0.05); --shadow-2: 0 10px 24px rgba(24, 15, 47, 0.10); --shadow-3: 0 20px 48px rgba(24, 15, 47, 0.16); --dur-fast: 150ms; --dur: 250ms; --ease: cubic-bezier(0.16, 1, 0.3, 1); --wrap: 1120px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 1.0625rem; line-height: 1.65; color: var(--body); background: var(--bg); } img { max-width: 100%; height: auto; } h1, h2, h3 { font-family: 'Fraunces', Georgia, 'Times New Roman', serif; color: var(--ink); line-height: 1.15; margin: 0 0 0.6em; overflow-wrap: break-word; } a { color: var(--brand-soft); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }