/**
 * Variables for all apps - symlinked to app-base/public/variables.css
 */
@import url("vaadin-lumo-styles/lumo.css");


: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;

  --size-x-small: 200px;
  --size-small: 300px;
  --size-medium: 400px;
  --size-large: 600px;
  --size-x-large: 800px;
  --size-xx-large: 1100px;
  --size-xxx-large: 1400px;

  --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-surface-tint: var(--md-sys-color-surface-tint);
  --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);

  --color-disabled-text: #646464;
  --color-secondary-text: #555;
  --color-brand: none;


  /* 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 */
  --lumo-base-color: var(--color-background);
  --lumo-primary-color: var(--color-primary);
  --lumo-primary-color-50pct: lch(from var(--color-primary) calc(l + 10) c h / 0.70);
  --lumo-primary-color-10pct: lch(from var(--color-primary) calc(l + 10) c h / 0.15);
  --lumo-primary-text-color: lch(from var(--color-primary) calc(l - 10) c h);
  --lumo-primary-contrast-color: var(--color-on-primary);

  --lumo-header-text-color: var(--color-primary-text);
  --lumo-body-text-color: var(--color-primary-text);
  --lumo-secondary-text-color: var(--color-secondary-text);

  --lumo-shade: lch(from var(--color-primary-container) calc(l - 75) calc(c - 20) h);
  --lumo-shade-5pct: lch(from var(--lumo-shade) l c h / 0.05);
  --lumo-shade-10pct: lch(from var(--lumo-shade) l c h / 0.1);
  --lumo-shade-20pct: lch(from var(--lumo-shade) l c h / 0.16);
  --lumo-shade-30pct: lch(from var(--lumo-shade) l c h / 0.26);
  --lumo-shade-40pct: lch(from var(--lumo-shade) l c h / 0.38);
  --lumo-shade-50pct: lch(from var(--lumo-shade) l c h / 0.52);
  --lumo-shade-60pct: lch(from var(--lumo-shade) l c h / 0.6);
  --lumo-shade-70pct: lch(from var(--lumo-shade) l c h / 0.69);
  --lumo-shade-80pct: lch(from var(--lumo-shade) l c h / 0.83);
  --lumo-shade-90pct: lch(from var(--lumo-shade) l c h / 0.94);

  /* 

  This is not quite working as expected with lumo components - base colors should be darker
  --lumo-error-color: var(--color-error);
  --lumo-error-color-50pct: lch(from var(--color-error) calc(l + 10) c h / 0.70);
  --lumo-error-color-10pct: lch(from var(--color-error) calc(l + 10) c h / 0.15);
  --lumo-error-text-color: lch(from var(--color-error) calc(l - 10) c h);
  --lumo-error-contrast-color: var(--color-on-error);

  --lumo-success-color: var(--color-success);
  --lumo-success-color-50pct: lch(from var(--color-success) calc(l + 10) c h / 0.70);
  --lumo-success-color-10pct: lch(from var(--color-success) calc(l + 10) c h / 0.15);
  --lumo-success-text-color: lch(from var(--color-success) calc(l - 10) c h);
  --lumo-success-contrast-color: var(--color-on-success);

  --lumo-warning-color: var(--color-warning);
  --lumo-warning-color-50pct: lch(from var(--color-warning) calc(l + 10) c h / 0.70);
  --lumo-warning-color-10pct: lch(from var(--color-warning) calc(l + 10) c h / 0.15);
  --lumo-warning-text-color: lch(from var(--color-warning) calc(l - 10) c h);
  --lumo-warning-contrast-color: var(--color-on-warning); 
  */

  --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);


}

/* DARK MODE */
/*  We override some key variables in dark mode */
:root[dark] {
  --lumo-shade: lch(from var(--color-primary-container) calc(l + 80) calc(c - 20) h);
  --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);

}