/* MonManager Material Design 3 tokens */
:root {
    --brand-green: #2E7D32;
    --brand-teal: #0F766E;
    --brand-amber: #F59E0B;
    --brand-coral: #E76F51;
    --brand-blue: #2563EB;
    --brand-black: #1f2937;
    --brand-white: #ffffff;
    --brand-gray: #f7faf7;
    --brand-dark-gray: #475569;

    --md-primary: var(--brand-green);
    --md-on-primary: var(--brand-black);
    --md-primary-container: #dcfce7;
    --md-on-primary-container: var(--brand-black);

    --md-secondary: var(--brand-teal);
    --md-on-secondary: var(--brand-white);
    --md-secondary-container: #ccfbf1;
    --md-on-secondary-container: var(--brand-black);

    --md-tertiary: var(--brand-amber);
    --md-on-tertiary: var(--brand-white);
    --md-tertiary-container: #fef3c7;
    --md-on-tertiary-container: #92400e;

    --md-background: #f8faf8;
    --md-on-background: var(--brand-black);
    --md-surface: var(--brand-white);
    --md-on-surface: var(--brand-black);
    --md-surface-variant: #eef4ef;
    --md-on-surface-variant: var(--brand-dark-gray);

    --md-error: var(--brand-coral);
    --md-on-error: var(--brand-white);
    --md-error-container: #ffe4de;
    --md-on-error-container: var(--brand-coral);

    --md-outline: #c8d5cd;
    --md-outline-variant: #e2ece4;

    --md-shadow: rgba(15, 23, 42, 0.07);
    --md-shadow-medium: rgba(15, 23, 42, 0.11);
    --md-shadow-high: rgba(15, 23, 42, 0.16);

    --md-shape-extra-small: 8px;
    --md-shape-small: 12px;
    --md-shape-medium: 16px;
    --md-shape-large: 20px;
    --md-shape-extra-large: 28px;

    --md-transition: all 0.25s cubic-bezier(0.2, 0, 0, 1);
}