/* ========================================================================== Michigan Peat Company — Design Tokens & Custom Styles -------------------------------------------------------------------------- All brand values are expressed as CSS custom properties so every page and Bootstrap override shares a single source of truth. Values marked [TBC] are approximated from the mocks; confirm exact hex codes and font names with the client before final sign-off. ========================================================================== */ /* -------------------------------------------------------------------------- 1. COLOR TOKENS -------------------------------------------------------------------------- Palette extracted from mocks: Primary — deep forest green (brand identity, CTAs, headings) Secondary — warm earth brown (secondary text, backgrounds) Accent — golden amber (highlights, hover states, badges) Neutral — stepped gray/cream scale (backgrounds, borders, text) Feedback — success / warning / danger / info aliases -------------------------------------------------------------------------- */ :root { /* --- Primary (forest green) — extracted from 01Home.png mock --- */ --color-primary: #213623; /* navbar & footer background */ --color-primary-dark: #162418; /* hover / active state */ --color-primary-light: #2e4d30; /* lighter tint for hover backgrounds */ --color-primary-subtle: #e4ece5; /* very light tint — section backgrounds*/ /* --- Secondary (earth brown) --- */ --color-secondary: #6b3f1b; /* TBC — warm peat-brown */ --color-secondary-dark: #4e2c10; --color-secondary-light: #9b6035; --color-secondary-subtle: #f5ece4; --color-btn-primary: #cf1141; /* navbar & footer background */ --color-btn-primary-dark: #8d0d2d; /* hover / active state */ --color-btn-primary-light: #fd3265; /* lighter tint for hover backgrounds */ --color-btn-primary-subtle: #e9849d; /* very light tint — section backgrounds*/ /* --- Accent (amber / gold) --- */ --color-accent: #c98c1a; /* TBC — warm amber highlight */ --color-accent-dark: #a36d0f; --color-accent-light: #f0b84a; --color-accent-subtle: #fef7e7; /* --- Neutral scale --- */ --color-neutral-900: #1a1a1a; /* near-black body text */ --color-neutral-700: #3d3d3d; /* secondary text */ --color-neutral-500: #666666; /* muted / placeholder text */ --color-neutral-300: #b8b8b8; /* disabled / decorative borders */ --color-neutral-100: #f2f2f2; /* light section background */ --color-neutral-50: #fafafa; /* page white / card background */ /* --- Semantic feedback aliases --- */ --color-success: #2a7a2a; --color-warning: var(--color-accent); --color-danger: #cf1141; --color-info: #1a6fa8; /* --- Surface & border --- */ --color-bg-body: #e8ebe4; --color-bg-section-alt: var(--color-neutral-100); --color-border: #d6d6d6; --color-border-light: #ebebeb; --color-baccto-primary: #008e60; --color-baccto-text: #006e4e; /* accessible text/icon on light bg — min 4.5:1 */ /* -------------------------------------------------------------------------- 2. TYPOGRAPHY TOKENS -------------------------------------------------------------------------- Font stacks identified from mocks. TBC — confirm exact Google Font names / weights with client. -------------------------------------------------------------------------- */ /* --- Font families --- */ --font-family-heading: 'Oswald', 'Merriweather', Georgia, 'Times New Roman', serif; --font-family-body: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-family-mono: 'Courier New', Courier, monospace; --font-family-lato: 'lato', 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-family-nav: 'Poppins', 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* --- Font sizes (fluid-friendly rem scale) --- */ --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-md: 1.125rem; /* 18px */ --font-size-lg: 1.25rem; /* 20px */ --font-size-xl: 1.5rem; /* 24px */ --font-size-2xl: 1.875rem; /* 30px */ --font-size-3xl: 2.25rem; /* 36px */ --font-size-4xl: 3rem; /* 48px */ --font-size-display: 3.75rem; /* 60px — home headline */ /* --- Font weights --- */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; /* --- Line heights --- */ --line-height-tight: 1.2; --line-height-snug: 1.4; --line-height-normal: 1.6; --line-height-relaxed: 1.75; /* --- Letter spacing --- */ --letter-spacing-tight: -0.025em; --letter-spacing-normal: 0em; --letter-spacing-wide: 0.05em; --letter-spacing-wider: 0.1em; /* -------------------------------------------------------------------------- 3. SPACING TOKENS -------------------------------------------------------------------------- 4-point base scale (multiples of 4 px). Expressed in rem. -------------------------------------------------------------------------- */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-25: 6.25rem; /* 100px */ --space-32: 8rem; /* 128px */ /* --- Section vertical padding --- */ --section-padding-y: var(--space-16); --section-padding-y-sm: var(--space-10); --section-padding-x: var(--space-25); --section-padding-x-sm: var(--space-5); /* -------------------------------------------------------------------------- 4. BORDER & RADIUS TOKENS -------------------------------------------------------------------------- */ --border-width: 1px; --border-width-thick: 2px; --border-color: var(--color-border); --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.5rem; /* 8px */ --radius-lg: 0.75rem; /* 12px */ --radius-xl: 1rem; /* 16px */ --radius-2xl: 1.25rem; /* 20px */ --radius-3xl: 1.5rem; /* 24px */ --radius-pill: 9999px; --radius-circle: 50%; /* -------------------------------------------------------------------------- 5. SHADOW TOKENS -------------------------------------------------------------------------- */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); /* -------------------------------------------------------------------------- 6. TRANSITION TOKENS -------------------------------------------------------------------------- */ --transition-fast: 150ms ease-in-out; --transition-base: 250ms ease-in-out; --transition-slow: 400ms ease-in-out; /* -------------------------------------------------------------------------- 7. Z-INDEX SCALE -------------------------------------------------------------------------- */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-modal: 400; --z-toast: 500; /* -------------------------------------------------------------------------- 8. BOOTSTRAP 5 OVERRIDE BRIDGE -------------------------------------------------------------------------- Map Michigan Peat tokens onto Bootstrap's CSS custom-property layer so every Bootstrap component inherits the brand automatically. -------------------------------------------------------------------------- */ --bs-primary: var(--color-primary); --bs-primary-rgb: 33, 54, 35; /* matches #213623 */ --bs-secondary: var(--color-secondary); --bs-secondary-rgb: 107, 63, 27; --bs-body-color: var(--color-neutral-900); --bs-body-bg: var(--color-bg-body); --bs-body-font-family: var(--font-family-body); --bs-body-font-size: var(--font-size-base); --bs-body-line-height: var(--line-height-normal); --bs-heading-color: var(--color-neutral-900); --bs-border-color: var(--color-border); --bs-border-radius: var(--radius-md); --bs-border-radius-sm: var(--radius-sm); --bs-border-radius-lg: var(--radius-lg); --bs-border-radius-pill: var(--radius-pill); --bs-link-color: var(--color-primary); --bs-link-hover-color: var(--color-primary-dark); }