:root {
    --primary-color: rgba(69, 90, 100, 1); /* Grayish-blue */
    --primary-hover-color: rgba(55, 71, 79, 1); /* Darker gray-blue */
    --secondary-color: rgba(102, 187, 106, 1); /* Softer green */
    --background-color: rgba(247, 247, 247, 0.85); /* Semi-transparent very light gray */
    --foreground-color: rgba(255, 255, 255, 0.85); /* Semi-transparent white */
    --text-color: rgba(55, 71, 79, 1); /* Dark grayish-blue for text */
    --text-shadow: -2px 2px 5px rgba(255, 255, 255, 0.3); /* Highlight to the lower-left side */
    --muted-text-color: rgba(96, 125, 139, 1); /* Muted blue-gray */
    --link-color: rgba(0, 0, 0, 1); /* Black for links */
    --link-visited: rgba(0, 0, 0, 1); /* Black for visited links */
    --link-hover-color: rgba(85, 139, 47, 1); /* Darker green hover */
    --button-color: rgba(102, 187, 106, 1); /* Soft green buttons */
    --button-hover-color: rgba(85, 139, 47, 1); /* Dark green hover */
    --font-family: 'Roboto', sans-serif; /* Modern sans-serif */
    --heading-font-size: clamp(1.2rem, 2vw, 4rem);
    --paragraph-font-size: clamp(1rem, 1.5vw, 2rem);
    --border-radius: 6px;
    --box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.3); /* Shadow to the lower-left side */
    --heading-text-color: rgba(25, 38, 70, 1) ;
}