:root,
[lang^="en"],
[lang="en"] {
  --md-typography-type: "regular";
  --title-size: 1.25rem;
  --title-weight: 500;
  --subheading-size: 1.125rem;
  --body-size: 1rem;
  --body2-weight: 500;
  --caption-size: 0.875rem;
  --button-size: 1rem;
  --button-weight: 500;
  --button-text-transform: uppercase;
  --body-line-height: 1.375;
  --title-line-height: 1.25;

  @media (min-width: 1024px) {
    & {
      --subheading-size: 1.0625rem;
      --body-size: 0.9375rem;
    }
  }

  input,
  textarea {
    /* iOS will zoom in if the font-size is smaller than 16px (or 1rem? i dont know) */
    font-size: 1rem;
  }
}

[lang^="zh"],
[lang="zh"],
[lang^="kr"],
[lang="kr"],
[lang^="ja"],
[lang="ja"] {
  --md-typography-type: "dense";
  --title-size: 1.4375rem;
  --subheading-size: 1.1875rem;
  --body-size: 1.0625rem;
  --caption-size: 0.9375rem;
  --button-size: 1.0625rem;
  --button-text-transform: none;
  --body-line-height: 1.425;
  --title-line-height: 1.3;

  @media (min-width: 1024px) {
    & {
      --subheading-size: 1.125rem;
      --body-size: 1rem;
    }
  }
}

:root {
  --tutu-color-primary: #673ab7;
  /* Deep Purple 500 */
  --tutu-color-on-primary: white;
  --tutu-color-primary-d: #512da8;
  /* 700 */
  --tutu-color-on-primary-d: white;
  --tutu-color-primary-dd: #4527a0;
  /* 800 */
  --tutu-color-on-primary-dd: white;
  --tutu-color-primary-l: #9575cd;
  /* 200 */
  --tutu-color-on-primary-l: white;
  --tutu-color-primary-ll: #b39ddb;
  /* 100 */
  --tutu-color-on-primary-ll: black;

  --tutu-color-secondary: #ffd740;
  /* Amber A200 */
  --tutu-color-on-secondary: black;

  --tutu-color-surface-l: white;
  --tutu-color-surface: #fafafa;
  --tutu-color-surface-d: #99999928;
  --tutu-color-surface-dd: #99999920;
  --tutu-color-on-surface: black;
  --tutu-color-secondary-text-on-surface: rgba(0, 0, 0, 0.5);
  --tutu-color-error-on-surface: #d32f2f;
  --tutu-color-inactive-on-surface: #757575;

  --tutu-color-shadow: rgba(0, 0, 0, 0.45);
  --tutu-color-shadow-l1: rgba(0, 0, 0, 0.4);
  --tutu-color-shadow-l2: rgba(0, 0, 0, 0.35);

  /* Switch */
  --tutu-shadow-e1: 0px 1px 2px 0px var(--tutu-color-shadow);

  /* (Resting) cards, raised button, quick entry / search bar */
  --tutu-shadow-e2: 0px 2px 4px 0px var(--tutu-color-shadow);

  /* Refresh indicator, quick entry / search bar (scrolled) */
  --tutu-shadow-e3: 0px 3px 6px 0px var(--tutu-color-shadow);

  /* App bar */
  --tutu-shadow-e4: 0px 4px 8px 0px var(--tutu-color-shadow);

  /* Snack bar, FAB (resting) */
  --tutu-shadow-e6: 0px 6px 12px 0px var(--tutu-color-shadow);

  /* Menu, (picked-up) cards, (pressed) raise button */
  --tutu-shadow-e8: 0px 8px 16px 0px var(--tutu-color-shadow);

  /* Submenu (+1dp for each submenu) */
  --tutu-shadow-e9: 0px 9px 18px 0px var(--tutu-color-shadow);
  --tutu-shadow-e10: 0px 10px 18px 0px var(--tutu-color-shadow);
  --tutu-shadow-e11: 0px 11px 18px 0px var(--tutu-color-shadow-l1);

  /* (pressed) FAB */
  --tutu-shadow-e12: 0px 12px 24px 0px var(--tutu-color-shadow-l1);

  /* Nav drawer, right drawer, modal bottom sheet */
  --tutu-shadow-e16: 0px 16px 32px 0px var(--tutu-color-shadow-l1);

  /* Dialog, picker */
  --tutu-shadow-e24: 0px 24px 48px 0px var(--tutu-color-shadow-l2);


  /* curves are also hard-coded in theme.ts */
  --tutu-anim-curve-std: cubic-bezier(0.4, 0, 0.2, 1);
  --tutu-anim-curve-deceleration: cubic-bezier(0, 0, 0.2, 1);
  --tutu-anim-curve-aceleration: cubic-bezier(0.4, 0, 1, 1);
  --tutu-anim-curve-sharp: cubic-bezier(0.4, 0, 0.6, 1);

  @media (max-width: 300px) {

    /* XS screen, like wearables */
    & {
      --tutu-transition-shadow: box-shadow 157.5ms var(--tutu-anim-curve-std);
    }
  }

  @media (max-width: 600px) {

    /* Mobile */
    & {
      --tutu-transition-shadow: box-shadow 225ms var(--tutu-anim-curve-std);
    }
  }

  @media (max-width: 1200px) {

    /* Tablet */
    & {
      --tutu-transition-shadow: box-shadow 292.5ms var(--tutu-anim-curve-std);
    }
  }

  /* Desktop */
  --tutu-transition-shadow: box-shadow 175ms var(--tutu-anim-curve-std);

  --tutu-zidx-nav: 1100;
}

* {
  font-family:
    Roboto,
    "Noto Sans",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  box-sizing: border-box;
  margin: 0;
}

body {
  font-size: var(--body-size, 1rem);
  line-height: var(--body-line-height);
}