:root {
    --color-primary: #186aa5;
    --color-primary-contrast: #FFFE;

    --color-brand: #a1ca51;
    --color-brand-contrast: #110A;

    --color-reject: #FF4081;
    --color-reject-contrast: #FFFE;

    --color-positive: #547F2C;
    --color-positive-contrast: #FFFE;

    --color-text-primary: #545454;
    --color-text-secondary: #6f6f6f;
    --color-text-tertiary: #8E8E8E;

    --color-background: #FFFFFF;
    --color-surface: #F6F6F6;

    --color-border: rgba(128, 128, 128, 0.2);

    /* Override the default (24px) material icon size in tabs */
    --size-icon-tab: 28px;

    --animation: 140ms;
    --longAnimation: 225ms;

    --disabledInputOpacity: 0.4;
    --productName: "Soho66 Softphone";

    --body1: 1rem;
    --body2: 0.875rem;
    --body3: 0.75rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-primary: #1A6396;
        --color-primary-contrast: #FFFE;

        --color-brand: #689F38;
        --color-brand-contrast: #FFFE;

        --color-reject: #FF4081;
        --color-reject-contrast: #FFFE;

        --color-positive: #547F2C;
        --color-positive-contrast: #FFFE;

        --color-text-primary: #EEE;
        --color-text-secondary: #DDD;
        --color-text-tertiary: #999;

        --color-background: #000;
        --color-surface: #111;

        --color-border: rgba(255, 255, 255, 0.2);

        .md-whiteframe-z2 {
            box-shadow: 0 2px 4px -1px rgba(255, 255, 255, .2), 0 4px 5px 0 rgba(255, 255, 255, .14), 0 1px 10px 0 rgba(255, 255, 255, .12) !important;
        }

        .md-whiteframe-z1 {
            box-shadow: 0 1px 3px 0 rgba(255, 255, 255, .2), 0 1px 1px 0 rgba(255, 255, 255, .14), 0 2px 1px -1px rgba(255, 255, 255, .12);
        }
    }
}