/* ========================================================================== BlackMountain Moving & Home Services DESIGN TOKENS — single source of truth -------------------------------------------------------------------------- Phase 4 deliverable. Every stylesheet in phase 5 reads these variables. Derived from design.md and cross-checked against the approved Stitch export. This file contains values only — no components, no page design. Rules baked in: - Dark theme only. Never pure black (#000) or pure white surfaces. - Accent #A68C6A is a highlight (buttons, links, one word), never a wash. - Two font families only: Playfair Display (headings) + Inter (body & UI). - No prices, no ratings, no invented claims live in the design system. ========================================================================== */ :root { color-scheme: dark; /* ======================================================================= 1. COLOUR — SURFACES (Exact Client Brand Board Match) ======================================================================= */ --color-primary: #1E2E26; /* Deep Forest Green: header, nav, key sections */ --color-panel: #1E2E26; /* full-width bands, footer, hero tint */ --color-secondary: #2A2A2A; /* Charcoal: sections, cards, raised blocks */ --color-surface: #2A2A2A; /* cards, raised blocks */ --color-surface-2: #222624; /* nested blocks, table stripes, inputs */ --color-surface-3: #1C201E; /* deepest inset (admin tables) */ --color-surface-bright: #363A38; /* hovered rows, hovered fields */ /* ---- background ---- */ --color-bg: #171B19; /* Dark Slate: overall website background */ /* ---- accent ---- */ --color-accent: #A68C6A; /* Warm Taupe: buttons, highlights, badges */ --color-accent-2: #B89B77; /* Hover state gold / warm taupe light */ --color-accent-soft: rgba(166, 140, 106, 0.12); /* notice/selected tint */ --color-accent-ring: rgba(166, 140, 106, 0.75); /* focus glow */ --color-ink: #101412; /* text laid on an accent button fill */ /* ---- text ---- */ --color-heading: #FFFFFF; --color-text: #D1D1D1; /* Warm Gray: main text color (softer white) */ --color-text-primary: #D1D1D1; /* Warm Gray: main body text */ --color-muted: #9A9A9A; /* Muted Gray: subtext, descriptions, borders */ --color-text-secondary: #9A9A9A; /* Muted Gray */ /* ---- lines ---- */ --color-border: rgba(255, 255, 255, 0.08); /* 1px, clean subtle divider */ --color-border-strong: rgba(166, 140, 106, 0.35); /* hover / accent outline */ /* ---- status (admin panel only) ---- */ --color-new: var(--color-accent-2); /* pill: New */ --color-contacted: #9CB3C9; /* pill: Contacted */ --color-quoted: #D9A94B; /* pill: Quoted + warnings */ --color-won: #6FBF8B; /* pill: Won */ --color-lost: var(--color-muted); /* pill: Lost */ --color-danger: #E0736B; /* destructive actions */ /* ---- image overlay ---- */ --grad-photo-overlay: linear-gradient( 180deg, rgba(23, 27, 25, 0.35) 0%, rgba(23, 27, 25, 0.92) 100% ); /* ======================================================================= 2. TYPOGRAPHY (Playfair Display / Merriweather + Inter / Montserrat) ======================================================================= */ --font-heading: "Playfair Display", "Merriweather", Georgia, serif; --font-serif: var(--font-heading); --font-body: "Inter", "Montserrat", system-ui, -apple-system, sans-serif; --font-sans: var(--font-body); --font-script: "Allura", "Caveat", "Dancing Script", cursive, serif; --color-text-muted: var(--color-muted); --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; /* Fluid scale. The clamp() middle value is what makes it responsive, so the desktop / mobile pair from the design is expressed as one token. */ --fs-hero: clamp(2.125rem, 5.2vw, 3.6rem); /* H1 */ --fs-h2: clamp(1.55rem, 3vw, 2.35rem); /* section heading */ --fs-h3: 1.25rem; --fs-h4: 1.0625rem; /* 17px */ --fs-body-lg: 1.125rem; --fs-body: 1rem; --fs-sm: 0.875rem; /* 14px */ --fs-label: 0.875rem; /* buttons, nav, labels */ --fs-label-sm: 0.8rem; /* helper text */ --fs-kicker: 0.75rem; /* eyebrow above an H2 */ --fs-micro: 0.6875rem; /* 11px, admin meta only*/ --lh-hero: 1.1; --lh-heading: 1.2; --lh-h3: 1.3; --lh-h4: 1.35; --lh-body: 1.7; --lh-sm: 1.6; --ls-hero: -0.02em; --ls-heading: -0.01em; --ls-kicker: 0.2em; --measure: 68ch; /* paragraph line length, 60–75 characters */ /* ======================================================================= 3. SPACING (1 unit = 4px, same mental model as the design file) ======================================================================= */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px; --sp-24: 96px; --sp-30: 120px; /* ---- semantic spacing ---- */ --section-py: 96px; /* vertical rhythm between sections */ --section-py-mobile: 56px; --card-p: 28px; --btn-py: 14px; --btn-px: 26px; /* ======================================================================= 4. LAYOUT ======================================================================= */ --container: 1180px; --gutter: 24px; --gutter-mobile: 16px; --tap-target: 44px; /* minimum hit area, mobile */ --header-h: 80px; --header-h-compact: 64px; /* sticky header after scroll */ /* Breakpoints — documented here, used literally in media queries: 390px design target (mobile) 640px small tablet / large phone 900px tablet — every multi-column row collapses below this 1200px desktop */ /* ======================================================================= 5. RADIUS ======================================================================= */ --r-xs: 4px; /* tiny admin marks */ --r-sm: 6px; --r-btn: 8px; /* buttons, inputs, notice boxes */ --r-card: 12px; /* cards, panels */ --r-lg: 16px; /* large feature blocks */ --r-pill: 999px; /* chips, status pills, avatars */ /* ======================================================================= 6. SHADOWS ======================================================================= */ --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --sh-card: 0 1px 2px rgba(0, 0, 0, 0.30), 0 12px 32px rgba(0, 0, 0, 0.35); --sh-raised: 0 18px 48px rgba(0, 0, 0, 0.45); --sh-glow: 0 0 0 3px var(--color-accent-ring); --sh-header: 0 1px 0 var(--color-border), 0 8px 24px rgba(0, 0, 0, 0.45); /* ======================================================================= 7. MOTION ======================================================================= */ --dur-fast: 150ms; --dur: 220ms; --dur-slow: 360ms; --ease: cubic-bezier(0.2, 0.7, 0.3, 1); /* ======================================================================= 8. Z-INDEX LADDER ======================================================================= */ --z-base: 1; --z-sticky: 50; --z-header: 100; --z-dropdown:200; --z-drawer: 300; --z-modal: 400; --z-toast: 500; /* ======================================================================= 9. ICONS ----------------------------------------------------------------------- Thin line set, 1.5px stroke, rounded caps, currentColor. ======================================================================= */ --icon-size: 24px; --icon-size-card: 28px; --icon-stroke: 1.5; } /* ========================================================================== 10. PORTING MAP — Stitch export class -> token above -------------------------------------------------------------------------- The Stitch export shipped three different naming schemes for the same palette. Everything below resolves to one token set. Phase 5 replaces the left column with the right column. brand-bg -> --color-bg brand-forest -> --color-panel brand-charcoal -> --color-surface brand-surface -> --color-surface-2 bg / background -> --color-bg panel -> --color-panel surface -> --color-surface surface-2 -> --color-surface-2 surface-container -> --color-surface-3 surface-bright -> --color-surface-bright brand-taupe / accent -> --color-accent brand-taupeHover -> --color-accent-2 accent-2 -> --color-accent-2 brand-text / text -> --color-text brand-body -> --color-text brand-textHeading -> --color-heading heading -> --color-heading brand-textMuted / muted -> --color-muted brand-borderSubtle / border -> --color-border brand-borderMedium -> --color-border-strong brand-ink / ink -> --color-ink ok / warn -> --color-won / --color-quoted text-[#9CB3C9] -> --color-contacted Arbitrary hex values still sitting in the export markup that must be replaced: #1c201e, #121514, #222624, #2A2A2A, #1F2E26, #A68C6A, #C2A87C, #171B19. ========================================================================== */ /* ========================================================================== 11. GLOBAL READS -------------------------------------------------------------------------- Nothing below is decorative — it is the minimum needed so the tokens above behave predictably (dark scrollbars, accent selection, no tap flash). Component CSS belongs to phase 5. ========================================================================== */ html { background-color: var(--color-bg); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { color: var(--color-heading); font-family: var(--font-heading); font-weight: var(--fw-regular); } ::selection { background: var(--color-accent); color: var(--color-ink); } /* Keyboard focus. Two indicators on purpose: the soft glow carries the design, the solid ring guarantees the 3:1 minimum WCAG 1.4.11 asks of a focus indicator — a translucent glow on its own measures below that on these dark surfaces. */ :focus-visible { outline: 2px solid var(--color-accent-2); outline-offset: 2px; border-color: var(--color-accent); box-shadow: var(--sh-glow); } /* Windows high-contrast mode throws box-shadow away, so the ring has to come from the system palette there or the focus would be invisible. */ @media (forced-colors: active) { :focus-visible { outline: 2px solid CanvasText; outline-offset: 2px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Mobile body text floor — design.md forbids anything smaller than 15px. */ @media (max-width: 640px) { body { font-size: max(0.9375rem, var(--fs-body)); } }