:root {
    /* Brand Colors */
    --color-primary: #EA0524;
    /* Bright Red from Mobilidade Inteligente logo */
    --color-primary-dark: #C10420;
    --color-accent: #FFD700;
    /* Lightning Yellow */
    --color-accent-hover: #E5C100;

    /* Neutrals (Base Palette) */
    --color-white: #FFFFFF;
    --color-off-white: #F9F9F9;
    --color-gray-100: #F3F3F3;
    --color-gray-200: #E0E0E0;
    --color-gray-300: #CCCCCC;
    --color-gray-400: #999999;
    --color-gray-800: #333333;
    --color-black: #111111;

    /* Semantic Variables (Light Mode Default) */
    --bg-body: var(--color-white);
    --bg-surface: var(--color-white);
    --bg-surface-alt: var(--color-gray-100);
    /* Slightly darker for contrast sections */
    --bg-card: var(--color-white);
    --bg-card-hover: #FFFBF0;
    /* Light yellow tint */
    --bg-input: var(--color-white);

    --text-heading: var(--color-black);
    --text-body: var(--color-gray-800);
    --text-muted: var(--color-gray-400);
    --text-inverse: var(--color-white);

    --border-color: var(--color-gray-200);
    --shadow-color: rgba(0, 0, 0, 0.1);

    /* Typography */
    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* Spacing */
    --container-width: 1200px;
    --header-height: 140px;
    --section-spacing: 80px;

    /* Effects */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 8px var(--shadow-color);
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --transition: all 0.3s ease;
}

/* Dark Mode Theme */
[data-theme="dark"] {
    /* Neutrals override for Dark Mode */
    --bg-body: #121212;
    --bg-surface: #1e1e1e;
    --bg-surface-alt: #252525;
    --bg-card: #2c2c2c;
    --bg-card-hover: #383838;
    /* Slightly lighter than card */
    --bg-input: #333333;

    --text-heading: #FFFFFF;
    --text-body: #FFFFFF;
    --text-muted: #CCCCCC;
    --text-inverse: #111111;
    /* Text on primary/accent backgrounds if needed */

    --border-color: #444444;
    --shadow-color: rgba(0, 0, 0, 0.4);
}