/* 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, media-feature-range-notation */

:root {
  --v-color-1: #020617; /* Tailwindcss Slate 950 */

  --v-color-2: #fff;

  --v-color-3: #ec7016;

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

  --v-shadow-default: 0 0 20px 5px rgb(0 0 0 / 10%);
  --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-border-radius-sm: 5px;
  --v-border-radius-md: 10px;

  --v-font-family-default: sans-serif;
  --v-font-family-headers: var(--v-font-family-default);

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

  --v-font-size-default: 1rem;
  --v-font-size-h1: 2rem;
  --v-font-size-h2: 1.5rem;
  --v-font-size-h3: 1.2rem;
}

@media (min-width: 700px) {
  :root {
    --v-spacing-sm: 2rem;
    --v-spacing-md: 2.5rem;

    --v-font-size-h1: 2.5rem;
    --v-font-size-h2: 1.8rem;
    --v-font-size-h3: 1.4rem;
  }
}

@media (min-width: 1200px) {
  :root {
    --v-font-size-default: 1.1rem;
  }
}

@media (min-width: 1400px) {
  :root {
    --v-spacing-md: 3rem;

    --v-font-size-h1: 3rem;
    --v-font-size-h2: 2rem;
    --v-font-size-h3: 1.5rem;
  }
}

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

    --v-font-size-h1: 3.5rem;
    --v-font-size-h2: 2.2rem;
    --v-font-size-h3: 1.6rem;
  }
}