/*Theme color notes*/
/*--theme-primary is the system primary color base on logo color -
--theme-on-primary is the element color over the primary color ex. text color on a button*/
/*--theme-secondary is the system secondary color base on logo color -
--theme-on-secondary is the element color over the secondary color*/
/*--theme-surface is the color of an element over an object (ex. fields)*/
/*--theme-on-surface is the color of the text or lines over the surface or background*/
/*--theme-foreground is the color of an object over the background (ex.card, menu etc.)*/


:root.light {
    /* GENERAL */
    --theme-primary: #005EBB;
    --theme-on-primary: #fff;
    --theme-secondary: #086ED5;
    --theme-on-secondary: #fff;
    
    --theme-surface: #fff;
    --theme-on-surface: #444;
    --theme-surface-readonly: #f1f1f1;
    
    --theme-background: #fff;
    --theme-on-background: #444;
    --theme-foreground: #fff;

    --theme-primary-action: #007baf;
    --theme-primary-focus: #009DDE3F;
    --theme-primary-hover: #009bde42;

    /* BUTTONS */
    --theme-btn-primary: var(--theme-primary);
    --theme-btn-primary-action: #007baf;
    --theme-btn-primary-focus: #004d99;
    --theme-btn-primary-hover: #004d99;
    
    --theme-btn-secondary: var(--theme-secondary);
    --theme-btn-secondary-action: #007baf;
    --theme-btn-secondary-focus: var(--theme-primary);
    --theme-btn-secondary-hover: var(--theme-primary);

    --theme-btn-outline: var(--theme-foreground);
    --theme-btn-outline-action: #007baf;
    --theme-btn-outline-focus: #009DDE3F;
    --theme-btn-outline-hover: var(--theme-primary);

    /* STATUS */
    --theme-info: #fff;
    --theme-running: #009DDE;
    --theme-success: #198754;
    --theme-failure: #dc3545;
    --theme-warning: #ffc107;
    --theme-pending: #E9A422;
    --theme-cancelled: #444444;

    /* OTHER */
    --theme-toggle-bg-color: #009DDE;
    --theme-toggle-header-color: #fff;

    --theme-logo: var(--theme-primary);
    --theme-lines: #c7c7c7;
    --theme-toggle: "\f186";
    --theme-active: var(--theme-primary);

    --theme-toast-text-on-high-luminance: #444;
    --theme-toast-text-on-low-luminance: #fff;



    /*typography*/
    --masp-headings-font-weight: 600;
    --masp-line-height-base: 1.5;
    --masp-heading-font: 'Istok Web', sans-serif;
    --masp-font-size-h1: 1.5rem;
    --masp-font-size-h2: 1.25rem;
    --masp-font-size-h3: 1.625rem;
    --masp-font-size-h4: 1.375rem;
    --masp-font-size-h5: 1.125rem;
    --masp-font-size-h6: 0.875rem;

}

:root.dark {
    --theme-primary: #00796B;
    --theme-on-primary: #fff;
    --theme-secondary: #457f7a;
    --theme-on-secondary: #000;
    --theme-surface: #2f2f2f;
    --theme-on-surface: #f1f1f1;
    --theme-background: #121212;
    --theme-on-background: #f1f1f1;
    --theme-lines: #535353;
    --theme-foreground: #1e1e1e;
    --theme-primary-action: #007062;
    --theme-primary-focus: #0096883F;
    --theme-toggle-bg-color: #00796B;
    --theme-toggle-header-color: #fff;
    --theme-logo: var(--theme-primary);
    --theme-toggle: "\f185";
    --theme-success: #0A9B44;
    --theme-active: var(--theme-primary);
    --theme-failure: #D20606;
    --theme-pending: #444444;


     /*typography*/
    --masp-headings-font-weight: 600;
    --masp-line-height-base: 1.5;
    --masp-heading-font: 'Istok Web', sans-serif;
    --masp-font-size-h1: 2.25rem;
    --masp-font-size-h2: 1.875rem;
    --masp-font-size-h3: 1.625rem;
    --masp-font-size-h4: 1.375rem;
    --masp-font-size-h5: 1.125rem;
    --masp-font-size-h6: 0.875rem;
}