@import url("src/reset.css");
@import url("src/html.css");
@import url("src/generic.css");
@import url("src/texts.css");
@import url("src/header.css");
@import url("src/nav.css");
@import url("src/article.css");
@import url("src/virtual.css");
@import url("src/home.css");
@import url("src/grid.css");
@import url("src/newsletter.css");
@import url("src/footer.css");
@import url("src/print.css");
@import url("src/toggle-light-mode.css");




:root {
  --color-primary--transparent: rgba(255, 255, 255, 0.86);

  /* --color-secondary-rgb: 120, 171, 150;
  --color-secondary: rgba(var(--color-secondary-rgb), 0.86);
  --color-secondary--light: rgba(var(--color-secondary-rgb), 0.2);
  --color-secondary--x-light: rgb(var(--color-secondary-rgb), 0.1);

  --color-tertiary-rgb: 253, 68, 26;
  --color-tertiary: rgba(var(--color-tertiary-rgb), 0.86);
  --color-tertiary--light: rgba(var(--color-tertiary-rgb), 0.2);
  --color-tertiary--x-light: rgb(var(--color-tertiary-rgb), 0.1); */
  --color-secondary-rgb: 200, 200, 200;
  --color-secondary: rgba(var(--color-secondary-rgb), 0.86);
  --color-secondary--light: rgba(var(--color-secondary-rgb), 0.2);
  --color-secondary--x-light: rgb(var(--color-secondary-rgb), 0.1);

  --color-tertiary-rgb: 200, 200, 200;
  --color-tertiary: rgba(var(--color-tertiary-rgb), 0.86);
  --color-tertiary--light: rgba(var(--color-tertiary-rgb), 0.2);
  --color-tertiary--x-light: rgb(var(--color-tertiary-rgb), 0.1);

  --unit--horizontal: 5vw;
  --unit--vertical: 1.7rem;
  --unit--vertical-relative: calc(
    var(--unit--vertical) * var(--window-height-factor)
  );

  --font-size-s: 0.8rem;
  --font-size-m: calc(var(--font-size-s) * 1.5);
  --font-size-l: calc(var(--font-size-m) * 1.5);
  --font-size-xl: calc(var(--font-size-l) * 1.5);
  --font-size-xxl: calc(var(--font-size-xl) * 1.5);

  --font-weight-light: 200;
  --font-weight-bold: 400;
  --font-weight-extra-bold: 550;

  --opacity-light: 0.6;

  --curve-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

[data-theme="dark"] {
  --color-background: #000;
  --color-primary: #ffffff;

  --font-weight-light: 200;
}
[data-theme="light"] {
  --color-background: #ffffff;
  --color-primary: #000;

  --color-secondary-rgb: 140, 140, 140;
  --font-weight-light: 240;
}

@media screen and (min-width: 640px) {
  :root {
    --unit--horizontal: 2.5vw;
    --unit--vertical: 1.7rem;

    --font-size-s: 0.9rem;
    --font-size-m: calc(var(--font-size-s) * 1.5);
    --font-size-l: calc(var(--font-size-m) * 1.5);
    --font-size-xl: calc(var(--font-size-l) * 1.5);
    --font-size-xxl: calc(var(--font-size-xl) * 1.5);

    /* --font-weight-light: 200;
    --font-weight-bold: 400;
    --font-weight-extra-bold: 550; */

    --body-padding: calc(10 * var(--unit--horizontal));
  }
}