/* MonManager Brand Colors */
:root {
    /* Brand Colors */
    --brand-yellow: #FFC107;
    --brand-black: #1a1a1a;
    --brand-white: #ffffff;
    --brand-red: #E63946;
    --brand-gray: #f5f5f5;
    --brand-dark-gray: #333333;

    /* Semantic Colors based on Brand */
    --md-primary: #FFC107;
    --md-on-primary: #1a1a1a;
    --md-primary-container: #fff8e1;
    --md-on-primary-container: #1a1a1a;

    --md-secondary: #1a1a1a;
    --md-on-secondary: #ffffff;
    --md-secondary-container: #f5f5f5;
    --md-on-secondary-container: #1a1a1a;

    --md-tertiary: #E63946;
    --md-on-tertiary: #ffffff;
    --md-tertiary-container: #ffe5e5;
    --md-on-tertiary-container: #E63946;

    --md-error: #E63946;
    --md-on-error: #ffffff;
    --md-error-container: #ffe5e5;
    --md-on-error-container: #E63946;

    --md-background: #ffffff;
    --md-on-background: #1a1a1a;
    --md-surface: #ffffff;
    --md-on-surface: #1a1a1a;
    --md-surface-variant: #f5f5f5;
    --md-on-surface-variant: #666666;

    --md-outline: #cccccc;
    --md-outline-variant: #e0e0e0;

    --md-shadow: rgba(0, 0, 0, 0.1);
    --md-shadow-medium: rgba(0, 0, 0, 0.15);
    --md-shadow-high: rgba(0, 0, 0, 0.2);
}

/* Dark Mode - Optional */
@media (prefers-color-scheme: dark) {
    :root {
        --md-primary: #FFC107;
        --md-on-primary: #1a1a1a;
        --md-primary-container: #ffb300;
        --md-on-primary-container: #1a1a1a;

        --md-secondary: #ffffff;
        --md-on-secondary: #1a1a1a;
        --md-secondary-container: #e0e0e0;
        --md-on-secondary-container: #1a1a1a;

        --md-background: #1a1a1a;
        --md-on-background: #ffffff;
        --md-surface: #262626;
        --md-on-surface: #ffffff;
        --md-surface-variant: #333333;
        --md-on-surface-variant: #cccccc;

        --md-outline: #555555;
        --md-outline-variant: #444444;
    }
}