/**
 * Unified Foundation — Design Tokens
 * Single source of truth for the teal brand palette and shared CSS variables.
 * Loaded before every other stylesheet, so all pages share one consistent theme.
 *
 * NOTE: This file intentionally defines several aliases for the same brand
 * colour (e.g. --secondary-color, --primary-dark) because the original
 * templates each used different variable names for the same teal. Keeping the
 * aliases lets every extracted stylesheet resolve to the unified palette
 * without rewriting every rule.
 */
:root {
    /* ===== Brand palette (teal) ===== */
    --primary-color: #4BB5C1;            /* Light teal — accents, highlights, hover */
    --primary-color-light: rgba(75, 181, 193, 0.1);
    --primary-color-dark: #2A6373;       /* Deep teal — text, links, buttons, headings */
    --primary-color-darker: #1D4A54;     /* Darker teal — pressed/hover-dark, gradients */
    --primary-gradient: linear-gradient(135deg, #4BB5C1, #2A6373);

    /* Aliases kept for backwards compatibility with the original templates */
    --secondary-color: #2A6373;          /* used by the header */
    --primary-dark: #2A6373;             /* used by the contact page */
    --primary-light: #4BB5C1;            /* used by the contact page */

    /* ===== Neutrals ===== */
    --white-color: #FFFFFF;
    --accent-color: #FFFFFF;
    --light-color: #F7F7F7;
    --light-gray: #F5F5F5;
    --dark-color: #333333;
    --text-color: #555555;

    /* ===== Semantic ===== */
    --success-color: #28A745;
    --error-color: #DC3545;

    /* ===== Effects & layout tokens ===== */
    --transition: all 0.3s ease-in-out;
    --box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    --box-shadow-hover: 0 15px 40px rgba(0, 0, 0, 0.15);
    --border-radius: 15px;
    --border-radius-small: 8px;
}