:root {
    /* 🎨 Colors */
    --color-primary: #1A1E4E;
    --color-accent: #F4A300;
    --color-background: #cccccc; /* Overall body background website */
    --color-white: #ffffff;
    --color-dark-text: #333333;
    --color-light-text: #fdf6e3;

    /* 🖋️ Typography */
    --font-base: "Segoe UI", sans-serif;
    --font-size-base: 1rem;
    --font-size-large: 2rem;
    --font-size-title: 2.5rem;

    /* 🔲 Layout */
    --border-radius: 10px;
    --box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

    /* 🧠 Header-specific variables */
    --header-bg: #228B22; /* or a different color */
    --header-text: var(--color-light-text);
    --header-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}