/* Global color, type, container, and theme button tokens. */

:root {
  /* Background */
  --color-background: #FFFFFF;

  /* White */
  --color-white: #FFFFFF;
  --color-white-87: rgb(255 255 255 / 87%);
  --color-white-66: rgb(255 255 255 / 66%);
  --color-white-62: rgb(255 255 255 / 62%);
  --color-white-27: rgb(255 255 255 / 27%);
  --color-white-24: rgb(255 255 255 / 24%);
  --color-white-20: rgb(255 255 255 / 20%);
  --color-white-1: rgb(255 255 255 / 1%);

  /* Off-white and light surface */
  --color-f6f6f6: #F6F6F6;
  --color-f4f3fb: #F4F3FB;
  --color-f6f2ff: #F6F2FF;
  --color-f5f1fe: #F5F1FE;
  --color-f4f1fd: #F4F1FD;
  --color-f3edfe: #F3EDFE;
  --color-ede9fb: #EDE9FB;
  --color-e4def4: #E4DEF4;
  --color-e3d9fd: #E3D9FD;
  --color-d9d9d9: #D9D9D9;

  /* Black and near-black */
  --color-black: #000000;
  --color-1e1e1f: #1E1E1F;
  --color-242424: #242424;
  --color-0b0b0b: #0B0B0B;
  --color-040009: #040009;
  --color-0e0020: #0E0020;
  --color-04000a-24: rgb(4 0 10 / 24%);
  --color-313131: #313131;

  /* Gray */
  --color-36383d: #36383D;
  --color-545454: #545454;
  --color-5e5e5e: #5E5E5E;
  --color-767676: #767676;
  --color-808080: #808080;
  --color-999999: #999999;
  --color-999ba6: #999BA6;
  --color-9f9f9f: #9F9F9F;
  --color-b1b1b1: #B1B1B1;
  --color-b5b5b5: #B5B5B5;
  --color-c3c3c3: #C3C3C3;
  --color-ceccdb: #CECCDB;
  --color-e0e0e0: #E0E0E0;
  --color-e9e9e9: #E9E9E9;
  --color-cfcfcf: #CFCFCF;
  --color-f9f9f9: #F9F9F9;
  --color-6b6b6b: #6B6B6B;
  --color-8e9296: #8E9296;
  --color-bebebe: #BEBEBE;

  /* Purple */
  --color-6b12d7: #6B12D7;
  --color-7321d6: #7321D6;
  --color-a861ff: #A861FF;
  --color-cea7ff: #CEA7FF;
  --color-cab3e5: #CAB3E5;
  --color-3a156f: #3A156F;
  --color-563089: #563089;
  --color-471b7d: #471B7D;
  --color-3f0c7c: #3F0C7C;
  --color-321169: #321169;
  --color-321169-0: rgb(50 17 105 / 0%);
  --color-230c4d: #230C4D;
  --color-230c4d-0: rgb(35 12 77 / 0%);
  --color-1d1239: #1D1239;
  --color-180036: #180036;

  /* Pink */
  --color-fbafff: #FBAFFF;

  /* Linear gradients from the design list are not defined here.
     The export shows the name only, without angle or color stops. */

  /* Container */
  --container-width: 1600px;

  /* Font */
  --font-primary: "Inter Tight", sans-serif;
  --font-secondary: "Instrument Serif", serif;
  --font-barlow: "Barlow", sans-serif;
}

/* Global font */
body {
  font-family: var(--font-primary);
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.6em;
}

/* Global paragraph */
p {
  color: var(--color-5e5e5e);
  font-family: var(--font-primary);
}

/* Heading 1 */
h1 {
  font-family: var(--font-primary);
  font-size: 88px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.15em;
  letter-spacing: -0.88px;
}

/* Heading 2 */
h2 {
  font-family: var(--font-primary);
  font-size: 72px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.15em;
  letter-spacing: -0.72px;
}

/* Heading 3 */
h3 {
  font-family: var(--font-primary);
  font-size: 40px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.25em;
  text-transform: capitalize;
}

/* Heading 4 */
h4 {
  font-family: var(--font-primary);
  font-size: 28px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.15em;
  text-transform: uppercase;
}

/* Heading 5 */
h5 {
  font-family: var(--font-primary);
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.15em;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
}

/* Section heading */
.section__title {
  margin: 0;
  color: var(--color-1e1e1f);
}

/* Section heading accent */
.section__title em,
.section__title span {
  color: var(--color-6b12d7);
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-weight: 400;
}

/* Container */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: 20px;
}

/* Theme button */
.theme-btn,
.theme-btn-white {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 4px;
  background: var(--color-6b12d7);
  padding: 13px 12px 13px 24px;
  color: var(--color-white);
  font-family: "Inter Tight", sans-serif;
  font-size: 16.5px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.0909em;
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

/* Theme button arrow */
.btn-arrow {
    display: flex;
    width: 30px;
    height: 30px;
    padding: 10px ;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background: var(--color-white);
}


/* Theme button hover */
.theme-btn:hover,
.theme-btn-white:hover {
  background: var(--color-3f0c7c);
  border-color: var(--color-3f0c7c);
  color: var(--color-white);
}

/* Theme button transparent */
.theme-btn-transparent {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 4px 12px 4px 24px;
    border: 1px solid var(--color-white);
    border-radius: 4px;
    background:transparent;
    color: var(--color-white);
    font-family: var(--font-primary);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

/* Theme button transparent hover */
.theme-btn-transparent:hover {
  background: var(--color-6b12d7);
  border-color: var(--color-6b12d7);
  color: var(--color-white);
}

/* Theme button white */
.theme-btn-white {
  border: 1px solid var(--color-1e1e1f);
  background: var(--color-white);
  color: var(--color-1e1e1f);
}