/* stylelint-disable selector-class-pattern, custom-property-empty-line-before, shorthand-property-no-redundant-values, max-line-length, comment-empty-line-before, custom-property-pattern */

:root {
  --v-color-1: #282f3b;
  --v-color-1--alt1: rgb(40 47 59 / 50%);

  --v-color-2: #fff;
  --v-color-2--alt1: #D8D8D8;

  --v-color-3: #466079;
  --v-color-3--alt1: #f0f3f9;
  --v-color-3--alt2: #e4e7ee;
  --v-color-3--alt3: #9eb3c7;
  --v-color-3--alt4: #0073e6;

  --v-color-text-default: var(--v-color-1);
  --v-color-text-default--invert: var(--v-color-2);
  --v-color-background-default: var(--v-color-2);

  --v-transition-default: all 0.2s ease-in-out;

  --v-shadow-default: 0 0 20px 5px rgb(0 0 0 / 10%);
  --v-shadow-xs: 0 0 12px 0 rgb(0 0 0 / 5%);
  --v-shadow-menu: rgb(0 0 0 / 10%) 0 4px 6px -1px, rgb(0 0 0 / 6%) 0 2px 4px -1px;

  --v-spacing-p: 1rem;
  --v-spacing-sm: 2rem;
  --v-spacing-md: 2rem;
  --v-spacing-lg: 2rem;

  --v-layout-container-padding: 1.3rem;
  --v-layout-container-size-default: 75rem;
  --v-layout-container-size-sm: 60rem;
  --v-layout-container-size-lg: 100rem;

  --v-border-radius-sm: 5px;
  --v-border-radius-md: 10px;

  --v-font-family-default: "League Spartan", sans-serif;
  --v-font-family-headers: var(--v-font-family-default);

  --v-font-weight-default: 400;
  --v-font-weight-light: 300;
  --v-font-weight-bold: 600;

  /* Header sizes -> */
  --v-p-header-top-bar-size: 3rem;
  --v-p-header-top-bar-size--sticky: 3rem;

  --v-p-header-main-size: 4rem;
  --v-p-header-main-size--sticky: 4rem;

  --v-p-header-logo-spacing: 0.5rem;
  --v-p-header-logo-spacing--sticky: 0.5rem;
  /* <- Header sizes */
}

@media (min-width: 700px) {
  :root {
    --v-spacing-lg: 4rem;

    --v-p-header-main-size: 5rem;
  }
}

@media (min-width: 1000px) {
  :root {
    --v-spacing-md: 3rem;
    --v-spacing-lg: 5rem;
  }
}

@media (min-width: 1200px) {
  :root {
    --v-spacing-md: 4rem;
  }
}

@media (min-width: 1400px) {
  :root {
    --v-p-header-top-bar-size: 3.5rem;

    --v-p-header-main-size: 7rem;
    --v-p-header-main-size--sticky: 5rem;

    --v-p-header-logo-spacing: 1rem;
  }
}

@media (min-width: 1500px) {
  :root {
    --v-spacing-lg: 8rem;
  }
}