/*
   Copyright 2022 Marc Nuri San Felix

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
 */

:root {
  /* https://github.com/material-foundation/material-tokens/blob/main/css/theme/light.css */
  --md-sys-color-primary: var(--md-ref-palette-primary40);
  --md-sys-color-surface-tint: var(--md-sys-color-primary);
  --md-sys-color-surface-tint-color: var(--md-sys-color-primary);
  --md-sys-color-on-error-container: var(--md-ref-palette-error10);
  --md-sys-color-on-error: var(--md-ref-palette-error100);
  --md-sys-color-error-container: var(--md-ref-palette-error90);
  --md-sys-color-on-tertiary-container: var(--md-ref-palette-tertiary10);
  --md-sys-color-on-tertiary: var(--md-ref-palette-tertiary100);
  --md-sys-color-tertiary-container: var(--md-ref-palette-tertiary90);
  --md-sys-color-tertiary: var(--md-ref-palette-tertiary40);
  --md-sys-color-shadow: var(--md-ref-palette-neutral0);
  --md-sys-color-shadow-rgb: var(--md-ref-palette-neutral0-rgb);
  --md-sys-color-error: var(--md-ref-palette-error40);
  --md-sys-color-outline: var(--md-ref-palette-neutral-variant50);
  --md-sys-color-outline-variant: var(--md-ref-palette-neutral-variant80);
  --md-sys-color-on-background: var(--md-ref-palette-neutral10);
  --md-sys-color-background: var(--md-ref-palette-neutral99);
  --md-sys-color-inverse-on-surface: var(--md-ref-palette-neutral95);
  --md-sys-color-inverse-surface: var(--md-ref-palette-neutral20);
  --md-sys-color-on-surface-variant: var(--md-ref-palette-neutral-variant30);
  --md-sys-color-on-surface: var(--md-ref-palette-neutral10);
  --md-sys-color-surface-variant: var(--md-ref-palette-neutral-variant90);
  --md-sys-color-surface: var(--md-ref-palette-neutral99);
  --md-sys-color-on-secondary-container: var(--md-ref-palette-secondary10);
  --md-sys-color-on-secondary: var(--md-ref-palette-secondary100);
  --md-sys-color-secondary-container: var(--md-ref-palette-secondary90);
  --md-sys-color-secondary: var(--md-ref-palette-secondary40);
  --md-sys-color-inverse-primary: var(--md-ref-palette-primary80);
  --md-sys-color-on-primary-container: var(--md-ref-palette-primary10);
  --md-sys-color-on-primary: var(--md-ref-palette-primary100);
  --md-sys-color-primary-container: var(--md-ref-palette-primary90);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* https://github.com/material-foundation/material-tokens/blob/main/css/theme/dark.css */
    --md-sys-color-surface-tint: var(--md-sys-color-primary);
    --md-sys-color-surface-tint-color: var(--md-sys-color-primary);
    --md-sys-color-on-error-container: var(--md-ref-palette-error80);
    --md-sys-color-on-error: var(--md-ref-palette-error20);
    --md-sys-color-error-container: var(--md-ref-palette-error30);
    --md-sys-color-on-tertiary-container: var(--md-ref-palette-tertiary90);
    --md-sys-color-on-tertiary: var(--md-ref-palette-tertiary20);
    --md-sys-color-tertiary-container: var(--md-ref-palette-tertiary30);
    --md-sys-color-tertiary: var(--md-ref-palette-tertiary80);
    --md-sys-color-shadow: var(--md-ref-palette-neutral0);
    --md-sys-color-shadow-rgb: var(--md-ref-palette-neutral0-rgb);
    --md-sys-color-error: var(--md-ref-palette-error80);
    --md-sys-color-outline: var(--md-ref-palette-neutral-variant60);
    --md-sys-color-outline-variant: var(--md-ref-palette-neutral-variant30);
    --md-sys-color-on-background: var(--md-ref-palette-neutral90);
    --md-sys-color-background: var(--md-ref-palette-neutral10);
    --md-sys-color-inverse-on-surface: var(--md-ref-palette-neutral20);
    --md-sys-color-inverse-surface: var(--md-ref-palette-neutral90);
    --md-sys-color-on-surface-variant: var(--md-ref-palette-neutral-variant80);
    --md-sys-color-on-surface: var(--md-ref-palette-neutral90);
    --md-sys-color-surface-variant: var(--md-ref-palette-neutral-variant30);
    --md-sys-color-surface: var(--md-ref-palette-neutral10);
    --md-sys-color-on-secondary-container: var(--md-ref-palette-secondary90);
    --md-sys-color-on-secondary: var(--md-ref-palette-secondary20);
    --md-sys-color-secondary-container: var(--md-ref-palette-secondary30);
    --md-sys-color-secondary: var(--md-ref-palette-secondary80);
    --md-sys-color-inverse-primary: var(--md-ref-palette-primary40);
    --md-sys-color-on-primary-container: var(--md-ref-palette-primary90);
    --md-sys-color-on-primary: var(--md-ref-palette-primary20);
    --md-sys-color-primary-container: var(--md-ref-palette-primary30);
    --md-sys-color-primary: var(--md-ref-palette-primary80);
  }
}

/* https://github.com/material-foundation/material-tokens/blob/main/css/colors.css */
.primary {
  color: var(--md-sys-color-on-primary);
  background-color: var(--md-sys-color-primary);
}
.on-primary {
  color: var(--md-sys-color-primary);
  background-color: var(--md-sys-color-on-primary);
}
.primary-container {
  color: var(--md-sys-color-on-primary-container);
  background-color: var(--md-sys-color-primary-container);
}
.on-primary-container {
  color: var(--md-sys-color-primary-container);
  background-color: var(--md-sys-color-on-primary-container);
}
.secondary {
  color: var(--md-sys-color-on-secondary);
  background-color: var(--md-sys-color-secondary);
}
.on-secondary {
  color: var(--md-sys-color-secondary);
  background-color: var(--md-sys-color-on-secondary);
}
.secondary-container {
  color: var(--md-sys-color-on-secondary-container);
  background-color: var(--md-sys-color-secondary-container);
}
.on-secondary-container {
  color: var(--md-sys-color-secondary-container);
  background-color: var(--md-sys-color-on-secondary-container);
}
.tertiary {
  color: var(--md-sys-color-on-tertiary);
  background-color: var(--md-sys-color-tertiary);
}
.on-tertiary {
  color: var(--md-sys-color-tertiary);
  background-color: var(--md-sys-color-on-tertiary);
}
.tertiary-container {
  color: var(--md-sys-color-on-tertiary-container);
  background-color: var(--md-sys-color-tertiary-container);
}
.on-tertiary-container {
  color: var(--md-sys-color-tertiary-container);
  background-color: var(--md-sys-color-on-tertiary-container);
}
.background {
  color: var(--md-sys-color-on-background);
  background-color: var(--md-sys-color-background);
}
.surface {
  color: var(--md-sys-color-on-surface);
  background-color: var(--md-sys-color-surface);
}
.surface-variant {
  color: var(--md-sys-color-on-surface-variant);
  background-color: var(--md-sys-color-surface-variant);
}
.on-surface-variant {
  color: var(--md-sys-color-surface-variant);
  background-color: var(--md-sys-color-on-surface-variant);
}
.outline {
  border: 1px solid var(--md-sys-color-outline);
}
.error {
  color: var(--md-sys-color-on-error);
  background-color: var(--md-sys-color-error);
}
.on-error {
  color: var(--md-sys-color-error);
  background-color: var(--md-sys-color-on-error);
}
.error-container {
  color: var(--md-sys-color-on-error-container);
  background-color: var(--md-sys-color-error-container);
}
.on-error-container {
  color: var(--md-sys-color-error-container);
  background-color: var(--md-sys-color-on-error-container);
}
.black {
  background-color: var(--md-ref-palette-black);
}
.black-text {
  color: var(--md-ref-palette-black);
}
.white {
  background-color: var(--md-ref-palette-white);
}
.white-text {
  color: var(--md-ref-palette-white);
}