:root {
  --padding-xxs: calc(var(--padding) * 0.125);
  --padding-xs: calc(var(--padding) * 0.25);
  --padding-sm: calc(var(--padding) * 0.5);
  --padding-md--half: calc(var(--padding-md) * 0.5);
  --padding-semi-sm: calc(var(--padding-semi) * 0.5);
  --padding: 1rem;
  --padding-semi: calc(var(--padding) * 1.25);
  --padding-md: calc(var(--padding) * 1.5);
  --padding-lg: calc(var(--padding) * 2);
  --padding-semi-lg: calc(var(--padding-semi) * 2);
  --padding-xl: calc(var(--padding) * 4);
  --padding-xxl: calc(var(--padding) * 8);

  --padding-btn-side: var(--padding-semi);
  --padding-btn-top: var(--padding-semi-sm);
  --padding-btn-bot: var(--padding-md--half);
  --padding-btn: var(--padding-btn-top) var(--padding-btn-side)
    var(--padding-btn-bot) var(--padding-btn-side);

  --padding-btn-side--small: var(--padding);
  --padding-btn-top--small: var(--padding-sm);
  --padding-btn-bot--small: var(--padding-semi-sm);
  --padding-btn--small: var(--padding-btn-top--small)
    var(--padding-btn-side--small) var(--padding-btn-bot--small)
    var(--padding-btn-side--small);

  --border-radius-btn: var(--padding-btn-side);
  --border-radius-btn--small: var(--padding-btn-side--small);
  --border-radius-card: calc(
    var(--padding-btn-side--small) + var(--padding-md)
  );

  --sizes-btn-height--small: calc(
    var(--font-size-btn--small) * var(--font-line-height-trim) +
      var(--padding-btn-top--small) + var(--padding-btn-bot--small)
  );
  --sizes-header-height: calc(
    var(--padding) + var(--padding) + var(--sizes-btn-height--small)
  );
  --sizes-content-height: calc(100dvh - var(--sizes-header-height));

  --font-family-gt-america: "GT America", Helvetica, Arial, sans-serif;
  --font-size-body: 1.25rem;
  --font-size-small: 0.875rem;
  --font-size-medium: 1.75rem;
  --font-size-title: 3rem;
  --font-size-btn: var(--font-size-body);
  --font-size-btn--small: 1rem;

  --font-line-height-body: 1.4;
  --font-line-height-trim: 0.9;
  --font-line-height-medium: 1.2;
  --font-line-height-title: 1.1;

  --font-letter-spacing-pos1: 0.01;
  --font-letter-spacing-neg1: -0.01;
  --font-letter-spacing-neg2: -0.02;
  --font-letter-spacing-neg4: -0.04;
  --font-letter-spacing-body: calc(
    var(--font-size-body) * var(--font-letter-spacing-neg1)
  );
  --font-letter-spacing-small: calc(
    var(--font-size-small) * var(--font-letter-spacing-pos1)
  );
  --font-letter-spacing-medium: calc(
    var(--font-size-medium) * var(--font-letter-spacing-neg1)
  );
  --font-letter-spacing-title: calc(
    var(--font-size-title) * var(--font-letter-spacing-neg4)
  );
  --font-letter-spacing-btn: calc(
    var(--font-size-btn) * var(--font-letter-spacing-neg2)
  );
  --font-letter-spacing-btn--small: calc(
    var(--font-size-btn--small) * var(--font-letter-spacing-neg2)
  );
  --gap-line-height-body: calc(
    var(--font-size-body) * var(--font-line-height-body)
  );
  --gap-line-height-medium: calc(
    var(--font-size-medium) * var(--font-line-height-medium)
  );
  --gap-paragraph-body: calc(var(--gap-line-height-body) / 2);
  --gap-paragraph-medium: calc(var(--gap-line-height-medium) / 2);

  --color-primary: #000;
  --color-primary--hover: #484848;
  --color-bg: #fff;
  --gradient-blue: linear-gradient(to bottom, #f7f9ff, #d9dfff);
  --gradient-pink: linear-gradient(to bottom, #fff7fc, #ffd9ee);
  --gradient-inactive: linear-gradient(to bottom, #fbfbfb, #ededf7);
  --gradient-bulletpoint-blue: linear-gradient(175deg, #ccd4ff, #8095ff);

  --z-index-max: 999;
  --z-index-top: 900;

  --transition-hover-duration: 0.25s;
  --transition-hover-timing: cubic-bezier(0.215, 0.61, 0.355, 1);
  --transition-hover: var(--transition-hover-duration)
    var(--transition-hover-timing);

  --transition-duration: calc(var(--transition-hover-duration) * 1.5);
  --transition-timing: var(--transition-hover-timing);
  --transition: var(--transition-duration) var(--transition-timing);
}

@media screen and (width < 1000px) {
  :root {
    --body-scale: 0.85;

    --padding-btn-side: calc(var(--padding-semi) * var(--body-scale));
    --padding-btn-top: calc(var(--padding-semi-sm) * var(--body-scale));
    --padding-btn-bot: calc(var(--padding-md--half) * var(--body-scale));
    --padding-btn: var(--padding-btn-top) var(--padding-btn-side)
      var(--padding-btn-bot) var(--padding-btn-side);

    --padding-btn-side--small: calc(var(--padding) * var(--body-scale));
    --padding-btn-top--small: calc(var(--padding-sm) * var(--body-scale));
    --padding-btn-bot--small: calc(var(--padding-semi-sm) * var(--body-scale));
    --padding-btn--small: var(--padding-btn-top--small)
      var(--padding-btn-side--small) var(--padding-btn-bot--small)
      var(--padding-btn-side--small);

    --border-radius-btn: var(--padding-btn-side);
    --border-radius-btn--small: var(--padding-btn-side--small);
    --border-radius-card: calc(
      var(--padding-btn-side--small) + var(--padding-md)
    );

    --sizes-btn-height--small: calc(
      var(--font-size-btn--small) * var(--font-line-height-trim) +
        var(--padding-btn-top--small) + var(--padding-btn-bot--small)
    );
    --sizes-header-height: calc(
      var(--padding-md--half) + var(--padding-md--half) +
        var(--sizes-btn-height--small)
    );
    --sizes-content-height: calc(100dvh - var(--sizes-header-height));

    --font-size-body: calc(1.25rem * var(--body-scale));
    --font-size-small: 0.8rem;
    --font-size-medium: 1.5rem;
    --font-size-title: 2.3rem;
    --font-size-btn: var(--font-size-body);
    --font-size-btn--small: calc(1rem * var(--body-scale));

    --font-line-height-body: 1.4;
    --font-line-height-trim: 0.9;
    --font-line-height-medium: 1.2;
    --font-line-height-title: 1.1;

    --font-letter-spacing-pos1: 0.01;
    --font-letter-spacing-neg1: -0.01;
    --font-letter-spacing-neg2: -0.02;
    --font-letter-spacing-neg4: -0.04;
    --font-letter-spacing-body: calc(
      var(--font-size-body) * var(--font-letter-spacing-neg1)
    );
    --font-letter-spacing-small: calc(
      var(--font-size-small) * var(--font-letter-spacing-pos1)
    );
    --font-letter-spacing-medium: calc(
      var(--font-size-medium) * var(--font-letter-spacing-neg1)
    );
    --font-letter-spacing-title: calc(
      var(--font-size-title) * var(--font-letter-spacing-neg4)
    );
    --font-letter-spacing-btn: calc(
      var(--font-size-btn) * var(--font-letter-spacing-neg2)
    );
    --font-letter-spacing-btn--small: calc(
      var(--font-size-btn--small) * var(--font-letter-spacing-neg2)
    );
    --gap-line-height-body: calc(
      var(--font-size-body) * var(--font-line-height-body)
    );
    --gap-line-height-medium: calc(
      var(--font-size-medium) * var(--font-line-height-medium)
    );
    --gap-paragraph-body: calc(var(--gap-line-height-body) / 2);
    --gap-paragraph-medium: calc(var(--gap-line-height-medium) / 2);
  }
}