:root {
  
  --letter-spacing-heading: -0.01rem;
  
  --font-family-heading: 'Roboto', 'Noto', sans-serif;
  --font-family-text: 'Roboto', 'Noto', sans-serif;
  --font-family-code: 'Mono', monospace;

  --font-weight-extra-bold: 800;
  --font-weight-bold: 700;
  --font-weight-normal: 400;
  --font-weight-semi-bold: 500;
  --font-weight-thin: 200;
  
  --font-size-xxxx-large: 4.5rem;
  --font-size-xxx-large: 3rem;
  --font-size-xx-large: 2.25rem;
  --font-size-x-large: 1.5rem;
  --font-size-large: 1.25rem;
  --font-size-medium: 1rem;
  --font-size-small: 0.875rem;
  --font-size-x-small: 0.75rem;
  
  --radius-sharp: 0;
  --radius-default: 4px;
  --radius-circle: 50%;
  --radius-pill: 20rem;
  
  --shadow-tooltip-turva: 0 2px 10px 0 rgba(117, 117, 117, 0.13);
  --shadow-default: 0 2px 6px 0 rgba(0, 41, 77, 0.07);
  --shadow-tooltip: 0 2px 10px 0 rgba(0, 41, 77, 0.07);
  --shadow-card-turva: 0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07);
  --shadow-modal: 0 2px 20px 0 rgba(0, 0, 0, 0.2);
  --shadow-card: 0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07);
  --shadow-hover-turva: 0 2px 10px 0 rgba(117, 117, 117, 0.15);
  --shadow-hover: 0 2px 10px 0 rgba(0, 41, 77, 0.1);
  --shadow-default-turva: 0 2px 6px 0 rgba(117, 117, 117, 0.13);
  --shadow-solid: 0 1px 3px 0 rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 2px 1px -1px rgba(0,0,0,.12);;;
  --shadow-material: rgba(0, 0, 0, 0.14) 0px 4px 5px 0px, rgba(0, 0, 0, 0.12) 0px 1px 10px 0px, rgba(0, 0, 0, 0.4) 0px 2px 4px -1px;
  
  --space-xx-small: 4px;
  --space-large: 20px;
  --space-x-small: 8px;
  --space-xxx-small: 2px;
  --space-small: 12px;
  --space-medium: 16px;
  --space-xx-large: 36px;
  --space-xxxx-large: 72px;
  --space-xxx-large: 48px;
  --space-x-large: 28px;
  
  --size-icon-xx-large: 48px;
  --size-form-border: 1px;
  --size-step-medium: 40px;
  --size-button-min-width: 8rem;
  --size-header: 4rem;
  --size-icon-xxx-large: 72px;
  --size-icon-x-large: 36px;
  --size-icon-xx-small: 10px;
  --size-step-small: 30px;
  --size-navigation: 3rem;
  --size-icon-large: 30px;
  --size-layout-max-width: 1110px;
  --size-layout-medium-width: 800px;
  --size-tappable-square: 48px;
  --size-icon-x-small: 16px;
  --size-icon-xxx-small: 7px;
  --size-button-border: 2px;
  --size-icon-medium: 24px;
  --size-icon-small: 20px;
  
  --opacity-85: 0.85;
  --opacity-75: 0.75;
  --opacity-50: 0.50;
  --opacity-30: 0.30;
  
  --z-index-dropdown: 600;
  --z-index-spinner: 800;
  --z-index-default: 1;
  --z-index-toast: 500;
  --z-index-popup: 950;
  --z-index-modal: 900;
  --z-index-sticky: 300;
  --z-index-masked: 100;
  --z-index-deep: -999999;
  --z-index-overlay: 700;
  --z-index-mask: 200;
  --z-index-header: 400;
  
  --line-height-medium: 1.5;
  --line-height-small: 1.25;
  --line-height-x-small: 1.1;

  
  --time-x-fast: 100ms;
  --time-fast: 220ms;
  --time-slow: 600ms;
  --time-x-slow: 1000ms;

  --transition-x-quickly: var(--time-x-fast) ease;
  --transition-quickly: var(--time-fast) ease;
  --transition-slowly: var(--time-fast) ease;
  --transition-x-slowly: var(--time-x-slow) ease;

}

/** 
 * Preference settings 
 *  https://www.silvestar.codes/articles/using-css-variables-for-reduced-motion-on-a-global-scale/
 */
 @media (prefers-reduced-motion: reduce) {
  :root {
    --transition-x-quickly: 5ms ease;
    --transition-quickly: 5ms ease;
    --transition-slowly: 5ms ease;
    --transition-x-slowly: 5ms ease;
  }
}

:root, html {
  font-size: var(--font-base, 16px)
}

/* @media (max-width: 992px) {
  :root, html {
    font-size: var(--font-base-small, 14px)
  }
} */
@media (max-width: 599px) {
  :root, html {
    font-size: var(--font-base-small, 14px)
  }
}
/* @media (max-width: 375px) {
  :root, html {
    font-size: var(--font-base-xx-small, 12px)
  }
} */

:root {
  --color-primary: var(--md-sys-color-primary);
  --color-primary-rgb: var(--md-sys-color-primary-rgb);
  --color-on-primary: var(--md-sys-color-on-primary);
  --color-on-primary-rgb: var(--md-sys-color-on-primary-rgb);
  --color-on-primary-container: var(--md-sys-color-on-primary-container);
  --color-primary-container: var(--md-sys-color-primary-container);
  
  --color-secondary: var(--md-sys-color-secondary);
  --color-secondary-rgb: var(--md-sys-color-secondary-rgb);
  --color-on-secondary: var(--md-sys-color-on-secondary);
  --color-on-secondary-rgb: var(--md-sys-color-on-secondary-rgb);
  --color-on-secondary-container: var(--md-sys-color-on-secondary-container);
  --color-secondary-container: var(--md-sys-color-secondary-container);

  --color-tertiary: var(--md-sys-color-tertiary);
  --color-tertiary-rgb: var(--md-sys-color-tertiary-rgb);
  --color-on-tertiary: var(--md-sys-color-on-tertiary);
  --color-on-tertiary-rgb: var(--md-sys-color-on-tertiary-rgb);
  --color-on-tertiary-container: var(--md-sys-color-on-tertiary-container);
  --color-tertiary-container: var(--md-sys-color-tertiary-container);

  --color-error: var(--md-sys-color-error);
  --color-error-rgb:  var(--md-sys-color-error-rgb);
  --color-on-error: var(--md-sys-color-on-error);
  --color-error-container: var(--md-sys-color-error-container);
  --color-on-error-container: var(--md-sys-color-on-error-container);

  --color-success: var(--md-sys-color-success);
  --color-on-success: var(--md-sys-color-on-success);
  --color-success-container: var(--md-sys-color-success-container);
  --color-on-success-container: var(--md-sys-color-on-success-container);

  --color-warning: var(--md-sys-color-warning);
  --color-on-warning: var(--md-sys-color-on-warning);
  --color-warning-container: var(--md-sys-color-warning-container);
  --color-on-warning-container: var(--md-sys-color-on-warning-container);
  
  --color-outline: var(--md-sys-color-outline);

  --color-background: var(--md-sys-color-background);
  --color-background-rgb: var(--md-sys-color-background-rgb);
  --color-on-background: var(--md-sys-color-on-background);

  --color-surface: var(--md-sys-color-surface);
  --color-surface-rgb: var(--md-sys-color-surface-rgb);
  --color-on-surface: var(--md-sys-color-on-surface);

  --color-surface-variant: var(--md-sys-color-surface-variant);
  --color-on-surface-variant: var(--md-sys-color-on-surface-variant);

  --color-inverse-surface: var(--md-sys-color-inverse-surface);
  --color-inverse-on-surface: var(--md-sys-color-inverse-on-surface);
  
  --color-accent: var(--color-tertiary);
  --color-on-accent: var(--color-on-tertiary);
  --color-accent-rgb: var(--color-tertiary-rgb);
  
  --color-primary-text: var(--color-on-background);

  --color-danger: var(--color-error);
  --color-divider:  var(--color-outline);

  --color-primary-dark: var(--color-on-primary-container);
  --color-primary-light: var(--color-primary-container);
  
  --color-secondary-dark: var(--color-on-secondary-container);
  --color-secondary-light: var(--color-secondary-container);
  
  --color-tertiary-dark: var(--color-on-tertiary-container);
  --color-tertiary-light: var(--color-tertiary-container);  
  
  /* Material Web Component */
  /* https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md  */
  --mdc-theme-primary: var(--color-primary);
  --mdc-theme-secondary: var(--color-secondary);
  --mdc-theme-error: var(--color-error);
  --mdc-theme-surface: var(--color-surface);
  --mdc-theme-background: var(--color-background); 

  /* for Vaadin */
  --material-primary-color: var(--color-primary);
  --material-secondary-color: var(--color-secondary);

  --alpha-base-black: 0, 0, 0;
  --alpha-base-white: 255, 255, 255;
  --alpha-base-rgb: var(--alpha-base-black); /* this is to have a base color for dark and light theme */
  --mdc-theme-on-primary: var(--color-on-primary);	/*Text and icons on top of a theme primary color background.	*/
  --mdc-theme-on-primary-rgb: var(--color-on-primary-rgb);	/*Text and icons on top of a theme primary color background.	*/
  --mdc-theme-on-secondary: var(--color-on-secondary);	/*Text and icons on top of a theme secondary color background.	*/
  --mdc-theme-on-secondary-rgb: var(--color-on-secondary-rgb);	/*Text and icons on top of a theme primary color background.	*/
  --mdc-theme-on-surface: var(--color-on-surface);	/*Text and icons on top of a theme surface color background.	*/
  
  --mdc-dialog-z-index: var(--z-index-modal);

  /*
    Not using this on main theme, but can be part of user theme 

    ## List
    --mdc-theme-primary	Color of the activated ripple and primary text color when activated.
    --mdc-theme-on-surface	Disabled text color.
    --mdc-theme-text-icon-on-background	Color of the graphic icon (if graphic is text icon).
    --mdc-theme-text-primary-on-background	Color of the primary text if not activated.
    --mdc-theme-text-secondary-on-background	Color of the secondary text if not activated.
    --mdc-theme-hint-on-background	Color of the meta (if is text or text icon).

    ## Tab
    --mdc-tab-height	48px	Height of the tab.
    --mdc-tab-horizontal-padding	24px	Horizontal padding on either side of the tab.
    --mdc-tab-stacked-height	72px	Height of the tab's stacked variant.
    --mdc-tab-text-label-color-default	 rgba(0, 0, 0, 0.6)	Color of an unactivated tab label.
    --mdc-tab-color-default	 rgba(0, 0, 0, 0.54)	Color of an unactivated icon.

    ## Dialog
    --mdc-dialog-heading-ink-color	 rgba(0, 0, 0, 0.87)	Color of the heading text.
    --mdc-dialog-content-ink-color	 rgba(0, 0, 0, 0.6)	Color applied to the projected content. (Note: it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).
    --mdc-dialog-scroll-divider-color	 rgba(0, 0, 0, 0.12)	Color of the dividers present when dialog is scrollable.

    ## Textfield 
    --mdc-text-field-filled-border-radius	4px 4px 0 0	Border radius of the standard / filled textfield's background filling.
    --mdc-text-field-idle-line-color	rgba(0, 0, 0, 0.42)	Color of the filled textfield's bottom line when idle.
    --mdc-text-field-hover-line-color	rgba(0, 0, 0, 0.87)	Color of the filled textfield's bottom line when hovering.
    --mdc-text-field-disabled-line-color	rgba(0, 0, 0, 0.06)	Color of the filled textfield's bottom line when disabled.
    --mdc-text-field-outlined-idle-border-color	rgba(0, 0, 0, 0.38)	Color of the outlined textfield's outline when idle.
    --mdc-text-field-outlined-hover-border-color	rgba(0, 0, 0, 0.87)	Color of the outlined textfield's outline when hovering.
    --mdc-text-field-outlined-disabled-border-color	rgba(0, 0, 0, 0.06)	Color of the outlined textfield's outline when disabled.
    --mdc-text-field-fill-color	rgb(245, 245, 245)	Color of the textfield's background fill (non-outlined).
    --mdc-text-field-disabled-fill-color	rgb(250, 250, 250)	Color of the textfield's background fill (non-outlined) when disabled.
    --mdc-text-field-ink-color	rgba(0, 0, 0, 0.87)	Color of the input text.
    --mdc-text-field-label-ink-color	rgba(0, 0, 0, 0.6)	Color of the non-focused floating label, helper text, char counter, and placeholder.
    --mdc-text-field-disabled-ink-color	rgba(0, 0, 0, 0.37)	Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.

    ## Select
    --mdc-select-error-color	--mdc-theme-error	Applies where --mdc-theme-error applies.
    --mdc-select-idle-line-color	 rgba(0, 0, 0, 0.42)	Color of the filled select's bottom line when idle.
    --mdc-select-hover-line-color	 rgba(0, 0, 0, 0.87)	Color of the filled select's bottom line when hovering.
    --mdc-select-outlined-idle-border-color	 rgba(0, 0, 0, 0.38)	Color of the outlined select's outline when idle.
    --mdc-select-outlined-hover-border-color	 rgba(0, 0, 0, 0.87)	Color of the outlined select's outline when hovering.
    --mdc-select-outlined-disabled-border-color	 rgba(0, 0, 0, 0.16)	Color of the outlined select's outline when disabled.
    --mdc-select-fill-color	 rgb(245, 245, 245)	Color of the select's background fill (non-outlined).
    --mdc-select-disabled-fill-color	 rgb(250, 250, 250)	Color of the select's background fill (non-outlined) when disabled.
    --mdc-select-ink-color	 rgba(0, 0, 0, 0.87)	Color of the selected text in default and error states.
    --mdc-select-label-ink-color	 rgba(0, 0, 0, 0.6)	Color of the non-focused floating label, helper text, and placeholder.
    --mdc-select-focused-label-color	--mdc-theme-primary	Color of the focused floating label, helper text, and placeholder.
    --mdc-select-disabled-ink-color	 rgba(0, 0, 0, 0.37)	Color of the input text, the floating label, helper text, and placeholder of a disabled select.
    --mdc-select-dropdown-icon-color	rgba(0, 0, 0, 0.54)	Color of the dropdown icon when select is not activated.
    --mdc-select-focused-dropdown-icon-color	--mdc-theme-primary	Color of the dropdown icon when select is activated.
    --mdc-select-disabled-dropdown-icon-color	 rgba(0, 0, 0, 0.38)	Opacity of the dropdown icon when disabled.
    --mdc-select-error-dropdown-icon-color	--mdc-select-error-color	Color of the dropdown icon when select is invalid.

    ## Checkbox
    --mdc-checkbox-ink-color	 #fff	Color of mark inside a checked or indeterminate checkbox (enabled or disabled).
    --mdc-checkbox-unchecked-color	 rgba(0, 0, 0, 0.54)	Color of the unchecked box.
    --mdc-checkbox-disabled-color	 rgba(0, 0, 0, 0.38)	Color of the checkbox box and fill when disabled.

    ## Radio
    --mdc-radio-unchecked-color	 rgba(0, 0, 0, 0.54)	Color of the ring of an unchecked radio.
    --mdc-radio-disabled-color	 rgba(0, 0, 0, 0.38)	Color of the ring and circle of a disabled radio.

  */
 --mdc-dialog-heading-ink-color: rgba(var(--alpha-base-rgb), 0.87); /*	 rgba(0, 0, 0, 0.87)	Color of the heading text.*/
 --mdc-dialog-content-ink-color:	rgba(var(--alpha-base-rgb), 0.6); /*rgba(0, 0, 0, 0.6)	Color applied to the projected content. (Note: it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).*/


  /* snakbar */
  --mdc-snackbar-action-color: var(--color-secondary);

}

/* DARK MODE */
/*  We override some key variables in dark mode */
:root[dark] {
  --alpha-base-rgb: var(--alpha-base-white); 
  
  --mdc-ripple-color: rgba(var(--alpha-base-rgb), 0.87);
  --shadow-material: var(--color-primary-text) 0px 4px 5px 0px,var(--color-primary-text) 0px 1px 10px 0px, var(--color-primary-text) 0px 2px 4px -1px;
  
  --mdc-theme-text-primary-on-background:  rgba(var(--alpha-base-rgb), 0.87);
  --mdc-theme-text-secondary-on-background:  rgba(var(--alpha-base-rgb), 0.6);
  --mdc-theme-text-hint-on-background: rgba(var(--alpha-base-rgb), 0.38);
  --mdc-theme-text-icon-on-background: rgba(var(--alpha-base-rgb), 0.38);
  
  --mdc-text-field-idle-line-color: rgba(var(--alpha-base-rgb), 0.42);
  --mdc-text-field-hover-line-color: rgba(var(--alpha-base-rgb), 0.87);
  --mdc-text-field-disabled-line-color: rgba(var(--alpha-base-rgb), 0.06);
  --mdc-text-field-outlined-idle-border-color: rgba(var(--alpha-base-rgb), 0.38);
  --mdc-text-field-outlined-hover-border-color: rgba(var(--alpha-base-rgb), 0.87);
  --mdc-text-field-outlined-disabled-border-color: rgba(var(--alpha-base-rgb), 0.06);
  --mdc-text-field-fill-color: rgba(var(--alpha-base-rgb), 0.15); 
  --mdc-text-field-disabled-fill-color:	rgba(var(--alpha-base-rgb), 0.35); 
  --mdc-text-field-ink-color:	rgba(var(--alpha-base-rgb), 0.87);
  --mdc-text-field-label-ink-color:	rgba(var(--alpha-base-rgb), 0.6);
  --mdc-text-field-disabled-ink-color:	rgba(var(--alpha-base-rgb), 0.37);

  --mdc-select-idle-line-color: rgba(var(--alpha-base-rgb), 0.42);
  --mdc-select-hover-line-color: rgba(var(--alpha-base-rgb), 0.87);
  --mdc-select-outlined-idle-border-color: rgba(var(--alpha-base-rgb), 0.38);
  --mdc-select-outlined-hover-border-color: rgba(var(--alpha-base-rgb), 0.87);
  --mdc-select-outlined-disabled-border-color: rgba(var(--alpha-base-rgb), 0.16);
  --mdc-select-fill-color: rgba(var(--alpha-base-rgb), 0.15); 
  --mdc-select-disabled-fill-color:  rgba(var(--alpha-base-rgb), 0.35); 
  --mdc-select-ink-color: rgba(var(--alpha-base-rgb), 0.87);
  --mdc-select-label-ink-color: rgba(var(--alpha-base-rgb), 0.6);
  --mdc-select-focused-label-color:	var(--mdc-theme-primary); /* 	Color of the focused floating label, helper text, and placeholder. */
  --mdc-select-disabled-ink-color: rgba(var(--alpha-base-rgb), 0.37);
  --mdc-select-dropdown-icon-color: rgba(var(--alpha-base-rgb), 0.54);
  --mdc-select-disabled-dropdown-icon-color: rgba(var(--alpha-base-rgb), 0.38);

  --mdc-checkbox-unchecked-color: : rgba(var(--alpha-base-rgb), 0.54);	
  --mdc-checkbox-disabled-color: : rgba(var(--alpha-base-rgb), 0.38);	
  
  --mdc-radio-unchecked-color: : rgba(var(--alpha-base-rgb), 0.54);	
  --mdc-radio-disabled-color: : rgba(var(--alpha-base-rgb), 0.38);	

}