:root {
    /* Colors */
    --color-background: white;
    --color-text: #333;
    --color-text-muted: #777;
    --color-text-button: white;
    --color-border: #ddd;

    --color-primary: hsl(210, 70%, 50%);
    --color-danger: hsl(0, 65%, 50%);
    --color-success: hsl(120, 40%, 50%);

    --color-background-faded: #f2f2f2;
    --color-primary-active: hsl(210, 70%, 45%);
    --color-danger-active: hsl(0, 65%, 45%);
    --color-success-active: hsl(120, 40%, 45%);

    --font-family: /* Safari for OS X and iOS (San Francisco) */ '-apple-system',
        /* Chrome for OS X (San Francisco) */ 'BlinkMacSystemFont',
        /* Chinese font for OSX and iOS */ 'Hiragino Sans GB',
        /* Android */ 'Roboto',
        /* Windows */ 'Segoe UI',
        /* Chinese font for Windows */ 'Microsoft Yahei', '微软雅黑',
        /* Linux */ 'Oxygen-Sans', 'Ubuntu', 'Cantarell',
        /* Basic web fallback */ 'Helvetica', 'Arial', 'STHeiti', sans-serif,
        /* Emoji */ 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';

    --font-family-monospace: 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;

    --spectrum-alias-background-color-modal-overlay: rgba(0, 0, 0, .5);
    --spectrum-alias-tabitem-text-color-selected-default: var(--color-primary-active);
    --spectrum-alias-tabitem-text-color-default: var(--color-text-muted);
    --spectrum-alias-tabs-divider-background-color-quiet: transparent;
    --spectrum-alias-tabitem-text-color-hover: var(--color-primary-active);
    --spectrum-alias-border-size-thick: 4px;
}