@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap');
/* If you use @import for your fonts, it needs to go
at the top of the CSS file before any other styles.
Replace the above @import with your own or use elements in the HTML*/
/*
==========================
CSS Variables
==========================
Set up variables for colors, fonts, and commonly used measurements (spacing).
then you use these variables instead of hard-coded values throughout your CSS.
That way if you want to change something, you can change it here and it will change everywhere.
*/
:root {
/* ------------------------------- Colors -----------------------------*/
/* Base semantic palette */
--primary-color: #324A5F; /* Primary text color (Soft Navy) */
--primary-bg: #F7F1E5; /* Primary background color (Cream) */
--secondary-color: #5A3825; /* Secondary/alternative text color (Chocolate Brown) */
--secondary-bg: #F1F1F1; /* Secondary/alternative background color (Light Gray) */
--accent-color: #E1A700; /* Accent or brand color (Mustard Yellow) */
--accent-color2: #6BBF59; /* Secondary accent color (Fresh Green) */
/* Link + Button specific tokens */
--link-color: #D1495B; /* Primary link/action color (Tomato Red) */
--link-hover-color: #E05A6A; /* Hover/focus */
--link-visited-color: #A73742; /* Visited state */
--button-bg: var(--link-color); /* Primary button color (matches link) */
--button-hover-bg: var(--link-hover-color); /* Hover button color (matches link hover) */
--button-text-color: #ffffff; /* Accessible contrast on button bg */
/* Secondary link colors for use with secondary-bg color */
--secondary-link-color: #7E8D4C; /* Olive Green */
--secondary-link-hover-color: #9AAA63; /* Lighter olive */
--secondary-link-visited-color: #6B7A3E;/* Darker olive */
/* Header and Footer colors
If you want these to be different than the rest of the page.
you can reuse previous variables or define new ones here */
--headerFooter-color: #F7F1E5; /* Cream text */
--headerFooter-bg: #5A3825; /* Chocolate Brown background */
/* ------------------------------- Typography -----------------------------*/
--font-primary: 'Lato', sans-serif;
--font-heading: 'Merriweather', serif;
/* Font sizes ----------- */
/* base font size. This is what rem units are calculated from */
--font-size-base: 18px;
/* Text sizes -----------
these are from the following page. You can go there, change the scale used and then copy and paste the CSS variables to replace these
https://baseline.is/tools/type-scale-generator/
Scale used below: 1.3333 - Perfect Fourth
*/
--text-size-xs: 0.56rem;
--text-size-sm: 0.75rem;
--text-size-md: 1rem;
--text-size-lg: 1.33rem;
--text-size-xl: 1.78rem;
--text-size-2xl: 2.37rem;
--text-size-3xl: 3.16rem;
--text-size-4xl: 4.21rem;
--text-size-5xl: 5.61rem;
/* ------------------------------- Spacing -----------------------------*/
/* this is calculated as multiples of the base font size */
--spacing-sm: calc(var(--font-size-base) * 0.5);
--spacing-md: calc(var(--font-size-base) * 1);
--spacing-lg: calc(var(--font-size-base) * 2);
--spacing-xl: calc(var(--font-size-base) * 3);
--spacing-2xl: calc(var(--font-size-base) * 4);
}
/* ------------ ennd of CSS Variables ------------- */
/* ================================
Minimal Normalize
Focus: layout consistency, box sizing, and responsive media.
================================ */
/* 1. Use border-box for everything
----------------------------------
Makes sizing predictable: padding and border are included in the width and height.
*/
*,
*::before,
*::after {
box-sizing: border-box;
}
/* 2. Remove default body margin
----------------------------------
Browsers add margin around .
Clearing it gives clean layout control.
Remember to add it back to your design if it needs it!
*/
body {
margin: 0;
}
/* 3. Inherit fonts for SVG text
----------------------------------
Helpful when using