/* Ported verbatim from src/styles/variables.css */

:root {
  --section-margin: 0 16px;

  --button-radius: 8px;
  --radius-md: 8px;
  --radius-md-responsive: 8px;
  --radius-lg-responsive: 12px;
  --radius-xl: 24px;

  --text-headline-xl: 44px;
  --text-headline-lg: 32px;
  --text-headline-md: 24px;
  --text-headline-sm: 16px;

  --text-copy-lg: 16px;
  --text-copy-md: 14px;
  --text-copy-sm: 12px;

  --text-button-lg: 14px;
  --text-button-md: 14px;
  --text-button-sm: 10px;

  --linehight-headline-xl: 58px;
  --linehight-headline-lg: 42px;
  --linehight-headline-md:32px;
  --linehight-headline-sm: 20px;

  --linehight-copy-lg: 26px;
  --linehight-copy-md: 20px;
  --linehight-copy-sm: 16px;

  --linehight-button-lg: 20px;
}

@media (min-width: 600px) {
  :root {
    --section-margin: 0 24px;

    --radius-md-responsive: 12px;
  }
}

@media (min-width: 1024px) {
  :root {
    --section-margin: 0 64px;

    --radius-md-responsive: 16px;

    --text-button-lg: 16px;

    --text-headline-xl: 64px;
    --text-headline-lg: 40px;
    --text-headline-md: 28px;
    --text-headline-sm: 20px;

    --text-copy-lg: 20px;

    --linehight-headline-xl: 84px;
    --linehight-headline-lg: 52px;
    --linehight-headline-md: 36px;
    --linehight-headline-sm: 29px;

    --linehight-copy-lg: 29px;
  }
}

/* Ported verbatim from src/styles/colors.css */

:root {
  --background-default: #f5f4f4;
  --background-secondary: #ffffff;
  --background-inverted: #000000;
  --background-tertiary: #e2e0e0;
  --background-disabled: #0000000f;
  --background-blur-32: rgba(255, 255, 255, 0.32);
  --background-inverted-tertiary: #7e7d7d;

  --text-primary: #000000;
  --text-primary-inverted: #ffffff;
  --text-color-secondary: #545353;
  --text-color-disabled: #a29f9f;
  --text-color-success: #08a75a;
  --text-disabled-inverted: #7E7D7D;
  --text-search-highlight: #87F314;

  --focus-color: #3385e3;

  --border-color-default: #000000;
  --border-color-secondary: rgba(0, 0, 0, 0.12);
  --border-color-deactive: #0000000f;
  --border-color-secondary-inverted: rgba(255, 255, 255, 0.18);
  --border-color-tertiary-inverted: rgba(255, 255, 255, 0.12);
  --border-color-tertiary: #0000000f;

  --background-accent-premium: #8830f3;

  --third-party-tiktok-red: #f72a51;
  --third-party-tiktok-aqua: #25eae6;

  --monochrome-white: #FFFFFF;
  --monochrome-black: #000000;

  --overlay-light-1: #FFFFFF1F;
  --overlay-light-2: #FFFFFF3D;
  --overlay-dark-1: #0000000F;
  --overlay-modal: #00000017;
  --overlay-hover: #0000000B;
  --overlay-pressed: #0000000D;
}