@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');


:root {
  --co-space-xs: 0.5rem;
  --co-space-sm: 1rem;
  --co-space-md: 2rem;
  --co-space-lg: 4rem;
  --co-space-xl: 6rem;

  --co-radius: 4px;
  --co-container: 72rem;

  /* Primitive — Colour Brand */
  --color-teal: #47B296;
  --color-teal-dark: #2E7E69;
  --color-teal-darker: #115C48;
  --color-teal-light: #6F9C90;
  --color-coral: #E95668;
  --color-coral-light: #F88A98;
  --color-orange: #F39200;
  --color-orange-dark: #C77800;
  --color-lime: #BDD274;
  --color-lime-dark: #7F9438;
  --color-blue: #93BFC8;
  --color-blue-dark: #69929A;
  --color-cream: #F8F2EA;
  --color-cream-dark: #E0DCD6;

  /* Primitive — Colour Neutral */
  --color-neutral-black: #122323;
  --color-neutral-white: #FFFFFF;
  --color-neutral-lightest: #FAFAFA;
  --color-neutral-lighter: #F6F6F6;
  --color-neutral-light: #D5D5D5;
  --color-neutral: #4B625C;
  --color-neutral-dark: #384743;
  --color-neutral-darker: #283431;
  --color-neutral-darkest: #1A2321;

  /* Primitive — Colour System */
  --color-success-green: #3B9E7C;
  --color-success-green-light: #ECFDF3;
  --color-error-red: #C4483F;
  --color-error-red-light: #FEF3F2;

  /* Semantic — Background */
  --background-primary: var(--color-neutral-white);
  --background-secondary: var(--color-neutral-lighter);
  --background-tertiary: var(--color-cream);
  --background-alternate: var(--color-teal);
  --background-success: var(--color-success-green-light);
  --background-error: var(--color-error-red-light);

  /* Semantic — Border */
  --border-primary: var(--color-neutral);
  --border-secondary: var(--color-neutral-light);
  --border-tertiary: var(--color-teal);
  --border-alternate: var(--color-neutral-lighter);
  --border-success: var(--color-success-green);
  --border-error: var(--color-error-red);

  /* Semantic — Text */
  --text-primary: var(--color-teal-dark);
  --text-secondary: var(--color-neutral);
  --text-alternate: var(--color-cream);
  --text-success: var(--color-success-green);
  --text-error: var(--color-error-red);

  /* Semantic — Link */
  --link-primary: var(--color-teal-dark);
  --link-secondary: var(--color-orange);
  --link-alternate: var(--color-cream);
}

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

body {
  margin: 0;
  color: var(--co-color-text);
  background-color: var(--co-color-background);
  font-family: 'Karla', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--co-space-sm);
  font-family: 'Karla', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  color: var(--text-primary)
}

p {
  color: var(--text-secondary)
}

h1,h2,h3,h4,h5,h6 {
  font-weight: 800;
}
h2,h3 {
  letter-spacing: -6%;
}
h4,h5,h6 {
  letter-spacing: -3%;
}

h1 {
  font-size: 2.5rem;
  line-height: 1.2;
  letter-spacing: -7%;
}

h2 {
  font-size: 2.25rem;
  line-height: 1.2;
}

h3 {
  font-size: 2rem;
  line-height: 1.2;
}

h4 {
  font-size: 1.5rem;
  line-height: 1.4;
}

h5 {
  font-size: 1.25rem;
  line-height: 1.4;
}

h6 {
  font-size: 1.125rem;
  line-height: 1.4;
}

@media (min-width: 768px) {
  h1 {
    font-size: 3.5rem;
    line-height: 1.2;
  }

  h2 {
    font-size: 3rem;
    line-height: 1.2;
    letter-spacing: -0.08em;
  }

  h3 {
    font-size: 2.5rem;
    line-height: 1.2;
    letter-spacing: -0.07em;
  }

  h4 {
    font-size: 2rem;
    line-height: 1.3;
    letter-spacing: -0.06em;
  }

  h5 {
    font-size: 1.5rem;
    line-height: 1.4;
    letter-spacing: -0.06em;
  }

  h6 {
    font-size: 1.25rem;
    line-height: 1.4;
    letter-spacing: -0.03em;
  }
}

p {
  margin: 0 0 var(--co-space-sm);
}

a {
  color: var(--co-color-primary);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.tagline {
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 700;
  color: var(--text-secondary);
  & strong {
    color: var(--text-primary);
    font-weight: 700;
  }
}

@media (min-width: 768px) {
  .tagline {
    letter-spacing: -0.03em;
  }
}

.text-large   { font-size: 1.25rem;  line-height: 1.5; }
.text-medium  { font-size: 1.125rem; line-height: 1.5; }
.text-regular { font-size: 1rem;     line-height: 1.5; }
.text-small   { font-size: 0.875rem; line-height: 1.5; }
.text-tiny    { font-size: 0.75rem;  line-height: 1.5; }

.light      { font-weight: 300; }
.normal     { font-weight: 400; }
.medium     { font-weight: 500; }
.semi-bold  { font-weight: 600; }
.bold       { font-weight: 700; }
.extra-bold { font-weight: 800; }

.bg-teal          { background-color: var(--color-teal); }
.bg-teal-dark     { background-color: var(--color-teal-dark); }
.bg-teal-darker   { background-color: var(--color-teal-darker); }
.bg-teal-light    { background-color: var(--color-teal-light); }
.bg-coral         { background-color: var(--color-coral); }
.bg-coral-light   { background-color: var(--color-coral-light); }
.bg-orange        { background-color: var(--color-orange); }
.bg-orange-dark   { background-color: var(--color-orange-dark); }
.bg-lime          { background-color: var(--color-lime); }
.bg-lime-dark     { background-color: var(--color-lime-dark); }
.bg-blue          { background-color: var(--color-blue); }
.bg-blue-dark     { background-color: var(--color-blue-dark); }
.bg-cream         { background-color: var(--color-cream); }
.bg-cream-dark    { background-color: var(--color-cream-dark); }
.bg-neutral-black       { background-color: var(--color-neutral-black); }
.bg-neutral-white       { background-color: var(--color-neutral-white); }
.bg-neutral-lightest    { background-color: var(--color-neutral-lightest); }
.bg-neutral-lighter     { background-color: var(--color-neutral-lighter); }
.bg-neutral-light       { background-color: var(--color-neutral-light); }
.bg-neutral             { background-color: var(--color-neutral); }
.bg-neutral-dark        { background-color: var(--color-neutral-dark); }
.bg-neutral-darker      { background-color: var(--color-neutral-darker); }
.bg-neutral-darkest     { background-color: var(--color-neutral-darkest); }
.bg-success-green       { background-color: var(--color-success-green); }
.bg-success-green-light { background-color: var(--color-success-green-light); }
.bg-error-red           { background-color: var(--color-error-red); }
.bg-error-red-light     { background-color: var(--color-error-red-light); }

.text-teal          { color: var(--color-teal); }
.text-teal-dark     { color: var(--color-teal-dark); }
.text-teal-darker   { color: var(--color-teal-darker); }
.text-teal-light    { color: var(--color-teal-light); }
.text-coral         { color: var(--color-coral); }
.text-coral-light   { color: var(--color-coral-light); }
.text-orange        { color: var(--color-orange); }
.text-orange-dark   { color: var(--color-orange-dark); }
.text-lime          { color: var(--color-lime); }
.text-lime-dark     { color: var(--color-lime-dark); }
.text-blue          { color: var(--color-blue); }
.text-blue-dark     { color: var(--color-blue-dark); }
.text-cream         { color: var(--color-cream); }
.text-cream-dark    { color: var(--color-cream-dark); }
.text-neutral-black       { color: var(--color-neutral-black); }
.text-neutral-white       { color: var(--color-neutral-white); }
.text-neutral-lightest    { color: var(--color-neutral-lightest); }
.text-neutral-lighter     { color: var(--color-neutral-lighter); }
.text-neutral-light       { color: var(--color-neutral-light); }
.text-neutral             { color: var(--color-neutral); }
.text-neutral-dark        { color: var(--color-neutral-dark); }
.text-neutral-darker      { color: var(--color-neutral-darker); }
.text-neutral-darkest     { color: var(--color-neutral-darkest); }
.text-success-green       { color: var(--color-success-green); }
.text-success-green-light { color: var(--color-success-green-light); }
.text-error-red           { color: var(--color-error-red); }
.text-error-red-light     { color: var(--color-error-red-light); }

.border-teal          { border-color: var(--color-teal); }
.border-teal-dark     { border-color: var(--color-teal-dark); }
.border-teal-darker   { border-color: var(--color-teal-darker); }
.border-teal-light    { border-color: var(--color-teal-light); }
.border-coral         { border-color: var(--color-coral); }
.border-coral-light   { border-color: var(--color-coral-light); }
.border-orange        { border-color: var(--color-orange); }
.border-orange-dark   { border-color: var(--color-orange-dark); }
.border-lime          { border-color: var(--color-lime); }
.border-lime-dark     { border-color: var(--color-lime-dark); }
.border-blue          { border-color: var(--color-blue); }
.border-blue-dark     { border-color: var(--color-blue-dark); }
.border-cream         { border-color: var(--color-cream); }
.border-cream-dark    { border-color: var(--color-cream-dark); }
.border-neutral-black       { border-color: var(--color-neutral-black); }
.border-neutral-white       { border-color: var(--color-neutral-white); }
.border-neutral-lightest    { border-color: var(--color-neutral-lightest); }
.border-neutral-lighter     { border-color: var(--color-neutral-lighter); }
.border-neutral-light       { border-color: var(--color-neutral-light); }
.border-neutral             { border-color: var(--color-neutral); }
.border-neutral-dark        { border-color: var(--color-neutral-dark); }
.border-neutral-darker      { border-color: var(--color-neutral-darker); }
.border-neutral-darkest     { border-color: var(--color-neutral-darkest); }
.border-success-green       { border-color: var(--color-success-green); }
.border-success-green-light { border-color: var(--color-success-green-light); }
.border-error-red           { border-color: var(--color-error-red); }
.border-error-red-light     { border-color: var(--color-error-red-light); }

.bg-primary   { background-color: var(--background-primary); }
.bg-secondary { background-color: var(--background-secondary); }
.bg-tertiary  { background-color: var(--background-tertiary); }
.bg-alternate { background-color: var(--background-alternate); }
.bg-success   { background-color: var(--background-success); }
.bg-error     { background-color: var(--background-error); }

.border-primary   { border-color: var(--border-primary); }
.border-secondary { border-color: var(--border-secondary); }
.border-tertiary  { border-color: var(--border-tertiary); }
.border-alternate { border-color: var(--border-alternate); }
.border-success   { border-color: var(--border-success); }
.border-error     { border-color: var(--border-error); }

.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-alternate { color: var(--text-alternate); }
.text-success   { color: var(--text-success); }
.text-error     { color: var(--text-error); }

.link-primary   { color: var(--link-primary); }
.link-secondary { color: var(--link-secondary); }
.link-alternate { color: var(--link-alternate); }



.gap-0   { gap: 0; }
.gap-24  { gap: 24px; }
.gap-40  { gap: 40px; }
.gap-80  { gap: 80px; }
.gap-112 { gap: 112px; }
.px_0 {
  padding-left: 0;
  padding-right: 0;
}
.py_0 {
  padding-top: 0;
  padding-bottom: 0;
}
.px_32 {
  padding-left: 32px;
  padding-right: 32px;
}
.py_32 {
  padding-top: 32px;
  padding-bottom: 32px;
}
.px_40 {
  padding-left: 40px;
  padding-right: 40px;
}
.py_40 {
  padding-top: 40px;
  padding-bottom: 40px;
}
.px_64 {
  padding-left: 64px;
  padding-right: 64px;
}
.px_80 {
  padding-left: 80px;
  padding-right: 80px;
}
.px_112 {
  padding-left: 112px;
  padding-right: 112px;
}
.py_64 {
  padding-top: 64px;
  padding-bottom: 64px;
}
.py_96 {
  padding-top: 96px;
  padding-bottom: 96px;
}
.py_112 {
  padding-top: 112px;
  padding-bottom: 112px;
}
@media (max-width: 768px) {
  .gap-24  { gap: 20px; }
  .gap-40  { gap: 24px; }
  .gap-80  { gap: 32px; }
  .gap-112 { gap: 48px; }

  .px_32,
  .px_40,
  .px_64,
  .px_80,
  .px_112 {
    padding-left: 20px;
    padding-right: 20px;
  }
  .py_32 {
    padding-top: 20px;
    padding-bottom: 20px;    
  }
  .py_40 {
    padding-top: 32px;
    padding-bottom: 32px;
  }  
  .py_64 {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .py_96 {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .py_112 {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}


.flex { display: flex; }
.flex-col { flex-direction: flex-column; }

svg path {
  fill: currentColor;
}