@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");

:root {
  --brand-border-radius: 3px;
  --brand-color-header: #3f3f3f;
  --brand-color-prim50: #ebddf8;
  --brand-color-prim100: #c29aea;
  --brand-color-prim200: #8231d4;
  --brand-color-prim300: #521d87;
  --brand-font-family: "Inter", "Times New Roman", sans-serif;
  --brand-color-prim50-filter: brightness(0) saturate(100%) invert(85%)
    sepia(26%) saturate(256%) hue-rotate(216deg) brightness(102%) contrast(94%);
  --brand-color-prim100-filter: brightness(0) saturate(100%) invert(71%)
    sepia(70%) saturate(2028%) hue-rotate(208deg) brightness(103%) contrast(83%);
  --brand-color-prim200-filter: brightness(0) saturate(100%) invert(23%)
    sepia(95%) saturate(2961%) hue-rotate(261deg) brightness(85%) contrast(95%);
  --brand-color-prim300-filter: brightness(0) saturate(100%) invert(10%)
    sepia(52%) saturate(5280%) hue-rotate(265deg) brightness(103%) contrast(95%);
  --main-font-family: "Inter", -apple-system, system-ui, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --secondary-font-family: "Poppins", -apple-system, system-ui,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Buttons */
  /* Primary Button */
  --btn-primary-active-background: rgba(82, 29, 135, 0.8);
  --btn-primary-active-border: rgba(82, 29, 135, 0.8);
  --btn-primary-active-halo: transparent;
  --btn-primary-active-text: #ffffff;
  --btn-primary-default-background: #8231d4;
  --btn-primary-default-border: #8231d4;
  --btn-primary-default-halo: transparent;
  --btn-primary-default-text: #ffffff;
  --btn-primary-disabled-background: #a0a0a0;
  --btn-primary-disabled-border: #ffffff;
  --btn-primary-disabled-halo: transparent;
  --btn-primary-disabled-text: #a0a0a0;
  --btn-primary-focus-background: #8231d4;
  --btn-primary-focus-border: #8231d4;
  --btn-primary-focus-halo: rgba(130, 49, 212, 0.65);
  --btn-primary-focus-text: #ffffff;
  --btn-primary-hover-background: rgba(130, 49, 212, 0.8509803922);
  --btn-primary-hover-border: rgba(130, 49, 212, 0.8509803922);
  --btn-primary-hover-halo: transparent;
  --btn-primary-hover-text: #ffffff;
  /* Secondary Button */
  --btn-secondary-active-background: transparent;
  --btn-secondary-active-border: rgba(82, 29, 135, 0.8);
  --btn-secondary-active-halo: transparent;
  --btn-secondary-active-text: rgba(82, 29, 135, 0.8);
  --btn-secondary-default-background: transparent;
  --btn-secondary-default-border: #8231d4;
  --btn-secondary-default-halo: transparent;
  --btn-secondary-default-text: #8231d4;
  --btn-secondary-disabled-background: #8231d4;
  --btn-secondary-disabled-border: #8231d4;
  --btn-secondary-disabled-halo: transparent;
  --btn-secondary-disabled-text: #e1e1e1;
  --btn-secondary-focus-background: transparent;
  --btn-secondary-focus-border: #8231d4;
  --btn-secondary-focus-halo: rgba(130, 49, 212, 0.2784313725);
  --btn-secondary-focus-text: #8231d4;
  --btn-secondary-hover-background: transparent;
  --btn-secondary-hover-border: rgba(130, 49, 212, 0.8509803922);
  --btn-secondary-hover-halo: transparent;
  --btn-secondary-hover-text: rgba(130, 49, 212, 0.8509803922);
  /* Tertiary Button */
  --btn-tertiary-active-background: transparent;
  --btn-tertiary-active-border: transparent;
  --btn-tertiary-active-halo: transparent;
  --btn-tertiary-active-text: rgba(82, 29, 135, 0.8);
  --btn-tertiary-default-background: transparent;
  --btn-tertiary-default-border: transparent;
  --btn-tertiary-default-halo: transparent;
  --btn-tertiary-default-text: #8231d4;
  --btn-tertiary-disabled-background: transparent;
  --btn-tertiary-disabled-border: transparent;
  --btn-tertiary-disabled-halo: transparent;
  --btn-tertiary-disabled-text: #a0a0a0;
  --btn-tertiary-focus-background: transparent;
  --btn-tertiary-focus-border: #8231d4;
  --btn-tertiary-focus-halo: rgba(130, 49, 212, 0.2784313725);
  --btn-tertiary-focus-text: #8231d4;
  --btn-tertiary-hover-background: transparent;
  --btn-tertiary-hover-border: transparent;
  --btn-tertiary-hover-halo: transparent;
  --btn-tertiary-hover-text: rgba(130, 49, 212, 0.8509803922);
  /* Badge */
  --badge-primary-bold-background: #8231d4;
  --badge-primary-bold-border: #521d87;
  --badge-primary-bold-text: #ffffff;
  --badge-primary-subtle-background: #ebddf8;
  --badge-primary-subtle-border: #8231d4;
  --badge-primary-subtle-text: #521d87;
  /* Radio */
  --radio-cb-enabled-checked-background: #8231d4;
  --radio-cb-enabled-checked-border: #8231d4;
  --radio-cb-disabled-checked-background: #f5f5f5;
  --radio-cb-disabled-checked-border: #a0a0a0;
  --radio-cb-disabled-unchecked-background: #f5f5f5;
  --radio-cb-disabled-unchecked-border: #a0a0a0;
  /* Checkbox */
  --checkbox-cb-enabled-focus-halo: #8231d4;
  --checkbox-cb-enabled-unchecked-border: #898989;
  --checkbox-cb-enabled-checked-filled-background: #8231d4;
  --checkbox-cb-enabled-checked-filled-border: #8231d4;
  --checkbox-cb-enabled-checked-outlined-background: #ffffff;
  --checkbox-cb-enabled-checked-outlined-border: inherit;
  --checkbox-cb-disabled-checked-filled-background: #a0a0a0;
  --checkbox-cb-disabled-checked-filled-border: #a0a0a0;
  --checkbox-cb-disabled-checked-outlined-background: #ffffff;
  --checkbox-cb-disabled-checked-outlined-border: #a0a0a0;
  /* Switch */
  --switch--enabled-unchecked-background: #d3d3d3;
  --switch--enabled-checked-background: #8231d4;
  --switch--disabled-unchecked-background: #f5f5f5;
  --switch--disabled-checked-background: #d3d3d3;
  /* PlanCard */
  --plan-card-default: #8231d4;
  /* LinkContent */
  --link-content-default: #8231d4;
  --link-content-focus: #8231d4;
  --link-content-active: #521d87;
  /* Progress Bar */
  --progress-bar-default: #8231d4;
}

* {
  font-size: 100%;
  font-family: var(--main-font-family);
}

body {
  background-color: white;
  margin: 0;
  min-width: 320px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}