: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-base: 1rem; 
  --font-size-xxxx-large: calc(4.5 * var(--font-size-base));
  --font-size-xxx-large: calc(3 * var(--font-size-base));
  --font-size-xx-large: calc(2.25 * var(--font-size-base));
  --font-size-x-large: calc(1.5 * var(--font-size-base));
  --font-size-large: calc(1.25 * var(--font-size-base));
  --font-size-medium: var(--font-size-base);
  --font-size-small: calc(0.875 * var(--font-size-base));
  --font-size-x-small: calc(0.75 * var(--font-size-base));
  
  --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-layout-small-width: 300px;
  --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-slow) 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: 599px) {
  :root, html {
    font-size: var(--font-base-small, 14px)
  }
}

: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-surface-container-lowest: var(--md-sys-color-surface-container-lowest);
  --color-surface-container-low: var(--md-sys-color-surface-container-low);
  --color-surface-container: var(--md-sys-color-surface-container);
  --color-surface-container-high: var(--md-sys-color-surface-container-high);
  --color-surface-container-highest: var(--md-sys-color-surface-container-highest);
  
  --color-surface-bright: var(--md-sys-color-surface-bright);
  --color-surface-dim: var(--md-sys-color-surface-dim);
  --color-inverse-primary: var(--md-sys-color-inverse-primary);
  --color-shadow: var(--md-sys-color-shadow);
  --color-outline-variant: var(--md-sys-color-outline-variant);
  --color-scrim: var(--md-sys-color-scrim);
  
  --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.	*/
  
  /* 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);
}