:root {
    --color-primary-dark: #1b2f33;
    --color-primary-light: #eef1ef;
    --color-accent-muted: #86836d;
    --color-accent-pink: #ef959c;
    --color-accent-green: #32a852;
    --color-accent-green-darker: #278440; /* Darker shade for hover */
    --color-white: #ffffff;
    --color-black: #000000;
}

.hero-bg {
    /* Overlay with primary-dark, adjust opacity as needed */
    background-image: linear-gradient(rgba(27, 47, 51, 0.7), rgba(27, 47, 51, 0.7)), url('media/hero.JPG');
    background-size: cover;
    background-position: center;
}

.timeline-item::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--color-accent-green);
    left: -39px; 
    top: 30px;  
    z-index: 1; 
}

/* Utility Classes for New Colors */
.bg-primary-dark { background-color: var(--color-primary-dark); }
.bg-primary-light { background-color: var(--color-primary-light); }
.bg-accent-muted { background-color: var(--color-accent-muted); }
.bg-accent-pink { background-color: var(--color-accent-pink); }
.bg-accent-green { background-color: var(--color-accent-green); }
.bg-accent-green-darker { background-color: var(--color-accent-green-darker); }

.text-primary-dark { color: var(--color-primary-dark); }
.text-primary-light { color: var(--color-primary-light); }
.text-accent-muted { color: var(--color-accent-muted); }
.text-accent-pink { color: var(--color-accent-pink); }
.text-accent-green { color: var(--color-accent-green); }
.text-white { color: var(--color-white); }

.border-accent-muted { border-color: var(--color-accent-muted); }
.border-accent-green { border-color: var(--color-accent-green); }

/* Example for focus ring, assuming Tailwind's ring utilities might still be partially used or for custom focus styles */
.focus\:ring-accent-green:focus {
    --tw-ring-color: var(--color-accent-green);
    /* Replicate Tailwind's ring focus style if needed, or define your own */
    box-shadow: 0 0 0 3px rgba(50, 168, 82, 0.5); 
}