/* COMMON */
body {
  /*** COLORS ***/
  --h: 222;
  --s: 60%;
  --l: 35%;
  --hs: var(--h), var(--s);
  --hsl: var(--h), var(--s), var(--l);
  --main-color: hsl(var(--hsl));

  /* Neutral colors */
  --nl: 50%;
  --nhs: 0, 0%;
  --nhsl: 0, 0%, var(--nl);

  --red-color: hsl(0, 99%, 39%);
  --shadow-color: black;

  /*** LENGHTS & SIZES ***/
  --max-width: 700px;
  --padding-global: 9px;
  --padding-global-vert: calc(var(--padding-global) * 0.6);
  --padding-modal: calc(var(--padding-global) * 2.2);
  --button-icon-width: 18px;
  --border-radius: 5px;

  /* widgets height */
  --form-element-height: 28px;

  /*** FONTS ***/
  /* Sizes */
  --global-text-size: 14px;
  --nav-text-size: calc(var(--global-text-size) + 1px);
  --table-text-size: calc(var(--global-text-size) - 2px);

  /* Animation */
  --ease-out-cubic: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 835px) {
  body {
    --padding-global: 8px;
    --padding-modal: calc(var(--padding-global) * 1.8);
    --form-element-height: 42px;
    --button-icon-width: 22px;
    --global-text-size: 17px;
    --table-text-size: calc(var(--global-text-size) - 3px);
  }
}

/* LIGHT THEME */
body {
  /* COLORS */
  --main-background: hsl(0, 0%, 98%);
  --super-strong-color: hsl(var(--h), 22%, 95%);
  --color-booster: hsl(var(--hs), 30%);
  --title-color: rgb(55, 55, 55);
  --title-color-alt: #525252;
  --light-neutral: hsl(var(--nhs), 87%);
  --text-color: hsl(var(--nhs), 20%);
  --delimiter-color: hsl(var(--nhs), 88%);
  --link-color: var(--main-color);
  --input-border-color: rgba(0, 0, 0, 0.2);
  --input-sleeping-bkd-color: #f8f8f8;

  /* FONTS */
  --font-family: system-ui, -apple-system, "Segoe UI", Roboto;
  --global-font-weight: 500;
  --nav-font-weight: 500;
}

/* DARK THEME */
@media (prefers-color-scheme: dark) {
  body {
    /* COLORS */
    --s: 70%;
    --l: 22%;

    /* Main colors */
    --main-background: hsl(0, 0%, 2%);
    --super-strong-color: hsl(var(--h), 18%, 10%);
    --color-booster: hsl(var(--hs), 50%);
    --title-color: rgb(236, 236, 236);
    --title-color-alt: rgb(155, 155, 155);
    --light-neutral: hsl(var(--nhs), 20%);
    --text-color: hsl(var(--nhs), 90%);
    --delimiter-color: hsl(var(--nhs), 20%);
    --link-color: var(--color-booster);
    --input-border-color: rgb(80, 80, 80);
    --input-sleeping-bkd-color: #3b3b3b;

    /* FONTS */
    --global-font-weight: 400;
    --nav-font-weight: 400;
  }
}