:root {
    /* Brand Colors */
    --color-primary-blue: #1D5576;
    --color-accent-yellow: #FDC321;
    --color-accent-red: #EF114C;
    --color-accent-lime: #9CE732;
    --color-accent-orange: #FDC31C;

    /* Theme Colors */
    --bg-color: #0b2330;
    /* Darker version of brand blue for background depth */
    --bg-gradient: linear-gradient(180deg, #0b2330 0%, #051016 100%);

    --card-bg: rgba(29, 85, 118, 0.4);
    /* Brand blue with opacity */
    --card-border: 1px solid rgba(253, 195, 33, 0.1);

    --text-main: #ffffff;
    --text-muted: #d0e6f5;

    --nav-bg: rgba(11, 35, 48, 0.9);

    /* Status Colors */
    --status-running: var(--color-accent-lime);
    --status-ended: var(--color-accent-red);
    --status-paused: var(--color-accent-yellow);

    /* Spacing */
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 32px;
    --spacing-xl: 64px;
    --container-width: 1200px;

    /* Typography */
    --font-main: 'Outfit', sans-serif;

    /* Utils */
    --radius-lg: 16px;
    --radius-md: 8px;
    --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.3);
    --transition: 0.3s ease;
}