/**************************************************************************
    CSS theme variables
    These are overridden by targets and used in: react-common, CRA webapps.
    To add new theme variable:
        1. Add variable to :root and .high-contrast below
        2. Set the variable value in each target's theme/themepacks.less
***************************************************************************/

// TODO: Define the complete set of theme variables we want to support
:root {
    // Default to a resonable scheme that doesn't closely match any existing target's colors
    /// Page
    --pxt-page-font: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --pxt-page-background: white;
    --pxt-page-foreground: black;
    --pxt-page-foreground-light: #767676;
    --pxt-page-foreground-shadow: rgba(0, 0, 0, 0.08);
    --pxt-page-dark-shadow: rgba(0, 0, 0, 0.5);
    /// Header bar
    --pxt-headerbar-background: #475569;
    --pxt-headerbar-background-glass: #47556940;
    --pxt-headerbar-foreground: white;
    --pxt-headerbar-accent: #475569;
    --pxt-headerbar-accent-smoke: #334155;
    /// Content area
    --pxt-content-background: #C7D2FE;
    --pxt-content-background-glass: #C7D2FE40;
    --pxt-content-foreground: #1E293B;
    --pxt-content-accent: #EEF2FF;
    --pxt-content-secondary-foreground: #666666;
    /// Primary button
    --pxt-button-primary-background: #065F46;
    --pxt-button-primary-background-glass: #065F4640;
    --pxt-button-primary-foreground: white;
    --pxt-button-primary-accent: #065F46;
    /// Secondary button
    --pxt-button-secondary-background: #CBD5E1;
    --pxt-button-secondary-background-glass: #CBD5E140;
    --pxt-button-secondary-foreground: #1E293B;
    --pxt-button-secondary-accent: #334155;
    /// Status colors
    --pxt-success: #3AFFB3;
    --pxt-info: #3ADCFF;
    --pxt-warning: #FFD43A;
    --pxt-error: #FF3A54;
    --pxt-success-background: #81E6D9;
    --pxt-info-background: #63B3ED;
    --pxt-warning-background: #FBD38D;
    --pxt-error-background: #FEB2B2;
    --pxt-success-accent: #38A169;
    --pxt-info-accent: #3182CE;
    --pxt-warning-accent: #DD6B20;
    --pxt-error-accent: #E53E3E;
}

.theme-highcontrast {
    // TODO: Fill this in
}