:root {
  /* Primitives / Brand Colors */
  --brand-primary-500: #ffc14f;
  --brand-secondary-500: #ffa7d3;
  --brand-tertiary-500: #ffb491;
  --brand-tertiary-600: #e6a832;

  /* Primitives / Neutrals */
  --white: #F2F0EF;
  --grey-100: #f9fafb;
  --grey-200: #f5f5f5;
  --grey-300: #dddddd; /* derived midpoint between --grey-200 and --grey-600 */
  --grey-600: #555555;
  --grey-700: #333333;
  --grey-800: #111111;
  --black: #000000;

  /* Primitives / UI-Colors */
  --ui-blue-400: #76bafe;
  --ui-blue-500: #0076ec;
  --ui-green-400: #89ed90;
  --ui-green-500: #00ec10;
  --ui-yellow-400: #ffec90;
  --ui-yellow-500: #ffe100;
  --ui-orange-400: #ffc793;
  --ui-orange-500: #ff9500;
  --ui-red-400: #ffb09e;
  --ui-red-500: #ec2b00;

  /* Typography primitives */
  --font-body: "Nunito Sans", sans-serif;
  --font-heading: "Nunito Sans", sans-serif;
  --font-serif: "Playfair Display", serif;

  --letter-spacing-body: 0em;
  --letter-spacing-head: -0.01em;

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 600;
  --font-weight-bold: 800;

  /* Typography scale */
  --h1-font-family: var(--font-heading);
  --h1-font-size: 5.75rem;
  --h1-letter-spacing: -0.4rem;
  --h1-font-weight: 900;
  --h1-line-height: 0.88;

  --h2-font-family: var(--font-heading);
  --h2-font-size: 4rem;
  --h2-letter-spacing: -0.125rem;
  --h2-font-weight: 900;
  --h2-line-height: 1.05;

  --h3-font-family: var(--font-heading);
  --h3-font-size: 3rem;
  --h3-letter-spacing: -0.125rem;
  --h3-font-weight: 600;
  --h3-line-height: 1;

  --h4-font-family: var(--font-heading);
  --h4-font-size: 1.5rem;
  --h4-letter-spacing: -0.02em;
  --h4-font-weight: 600;
  --h4-line-height: 1.2;

  --h5-font-family: var(--font-heading);
  --h5-font-size: 1.25rem;
  --h5-letter-spacing: -0.01em;
  --h5-font-weight: 600;
  --h5-line-height: 1.3;

  --h6-font-family: var(--font-heading);
  --h6-font-size: 1.125rem;
  --h6-letter-spacing: 0em;
  --h6-font-weight: 600;
  --h6-line-height: 1.35;

  --body-large-font-family: var(--font-body);
  --body-large-font-size: 1.125rem;
  --body-large-letter-spacing: var(--letter-spacing-body);
  --body-large-font-weight: var(--font-weight-regular);
  --body-large-line-height: 1.4;

  --body-regular-font-family: var(--font-body);
  --body-regular-font-size: 1rem;
  --body-regular-letter-spacing: var(--letter-spacing-body);
  --body-regular-font-weight: var(--font-weight-regular);
  --body-regular-line-height: 1.4;

  --body-small-font-family: var(--font-body);
  --body-small-font-size: 0.875rem;
  --body-small-letter-spacing: var(--letter-spacing-body);
  --body-small-font-weight: var(--font-weight-regular);
  --body-small-line-height: 1.4;

  @media (max-width: 991px) {
    --h1-font-size: 4.5rem;
    --h1-letter-spacing: -0.2rem;
    --h2-font-size: 3rem;
    --h3-font-size: 2rem;
  } 

  @media (max-width: 767px) {
    --h1-font-size: 3.5rem;
    --h2-font-size: 2.25rem;
    --h3-font-size: 1.5rem;
  } 

  /* Global layout primitives */ 
  --general--global-margin: 1rem;
  --general--global-width: 100%;
  --general--global-max-width: 80rem;
  --general--global-gutter: 1rem;
  --general--global-border-radius: 1.25rem;

  /* Semantics / Logo */
  --logo-primary: var(--black);
  --logo-secondary: var(--white);

  /* Semantics / Text */
  --text-primary: var(--black);
  --text-secondary: var(--grey-700);
  --text-tertiary: var(--grey-600);
  --text-quarternary: var(--grey-300);
  --text-alternate: var(--white);

  /* Semantics / Background */
  --background-primary: var(--white);
  --background-secondary: var(--brand-primary-500);
  --background-tertiary: var(--grey-800);
  --background-quarternary: var(--black);
  --background-alternate: var(--grey-100);
  --background-alternate2: var(--grey-300);

  /* Semantics / Border */
  --border-primary: var(--grey-300);
  --border-secondary: var(--grey-600);
  --border-tertiary: var(--grey-700);
  --border-quarternary: var(--grey-800);
  --border-alternate: var(--white);

  /* Semantics / Icon */
  --icon-primary: var(--black);
  --icon-secondary: var(--grey-700);
  --icon-tertiary: var(--grey-600);
  --icon-alternate: var(--white);
  --icon-gold: var(--brand-primary-500);
  --icon-gold2: var(--brand-tertiary-500);
  --icon-gold3: var(--brand-secondary-500);

  /* Semantics / Utility / Status */
  --status-success: var(--ui-blue-500);
  --status-error: var(--ui-red-500);
  --status-warning: var(--ui-red-400);

  /* Semantics / Utility / Accessibility */
  --a11y-focus: var(--ui-blue-400);
  --a11y-text-selection: rgba(118, 186, 254, 0.35); /* derived from --ui-blue-400 */
}

@media (max-width: 767px) {
  :root {
    --general--global-gutter: 0.5rem;
  }
}