/* Explain: Theme tokens, typography, and color variables for a professional look. */
:root {
    /* Brand Colors */
    --petrol: #1D4E5F;
    --petrol-hover: #153945;
    --sage: #8FA08B;
    --sage-hover: #7D8D79;
    --white: #FFFFFF;
    --gray-light: #F9FAFB;
    --gray-border: #E5E7EB;
    --accent-beige: #FDFBF7;
    --accent-yellow: #FEF3C7;
    
    /* Text Colors */
    --text-main: #1F2937;
    --text-muted: #4B5563;

    /* Semantic Mappings */
    --primary-color: var(--petrol);
    --primary-hover: var(--petrol-hover);
    --secondary-color: var(--sage);
    --background-color: var(--gray-light);
    --surface-color: var(--white);
    --text-color: var(--text-main);
    --border-color: var(--gray-border);

    /* Typography */
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Montserrat', sans-serif;

    /* Styling Variables */
    --radius-soft: 0.75rem;
    --shadow-soft: 0 10px 25px rgba(29, 78, 95, 0.08);
    --shadow-card: 0 4px 6px rgba(0, 0, 0, 0.05);
}