:root {

  /* Typeface Families */
  --typeface-family-body: body;
  --typeface-family-display: display;
  --typography-root-size: 16px;
  --typography-letter-spacing-default: 0;

  /* Typeface Weights */
  --typeface-weight-medium: 400;
  --typeface-weight-bold: 700;
  --typeface-weight-body-light: 400;
  --typeface-weight-body-medium: 400;
  --typeface-weight-body-medium-bold: 600;
  --typeface-weight-body-bold: 700;
  --typeface-weight-display-light: 400;
  --typeface-weight-display-medium: 400;
  --typeface-weight-display-bold: 500;

  /* Breakpoints */
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;

  /* Base Colors */
  --black: var(--wp--custom--color--base--black, #303133);
  --white: var(--wp--custom--color--base--white, #fff);

  /* Primary Colors */
  --color-primary-50: var(--wp--custom--color--primary--50, #fcf1ef);
  --color-primary-100: var(--wp--custom--color--primary--100, #f7dbd7);
  --color-primary-200: var(--wp--custom--color--primary--200, #efb5af);
  --color-primary-300: var(--wp--custom--color--primary--300, #e68f87);
  --color-primary-400: var(--wp--custom--color--primary--400, #dc695f);
  --color-primary-500: var(--wp--custom--color--primary--500, #c81e11);
  --color-primary-600: var(--wp--custom--color--primary--600, #aa1a10);
  --color-primary-700: var(--wp--custom--color--primary--700, #8c1711);
  --color-primary-800: var(--wp--custom--color--primary--800, #6d1b25);
  --color-primary-900: var(--wp--custom--color--primary--900, #4d141b);

  /* Secondary Colors */
  --color-secondary-50: var(--wp--custom--color--secondary--50, #e8f3fb);
  --color-secondary-100: var(--wp--custom--color--secondary--100, #c5e1f4);
  --color-secondary-200: var(--wp--custom--color--secondary--200, #97c9ea);
  --color-secondary-300: var(--wp--custom--color--secondary--300, #68b2df);
  --color-secondary-400: var(--wp--custom--color--secondary--400, #359ad4);
  --color-secondary-500: var(--wp--custom--color--secondary--500, #1184c8);
  --color-secondary-600: var(--wp--custom--color--secondary--600, #0f75b1);
  --color-secondary-700: var(--wp--custom--color--secondary--700, #0d6397);
  --color-secondary-800: var(--wp--custom--color--secondary--800, #1b227a);
  --color-secondary-900: var(--wp--custom--color--secondary--900, #141a5c);
  
  /* Information Colors */
  --color-information-50: var(--wp--custom--color--information--50, #e9f0ff);
  --color-information-100: var(--wp--custom--color--information--100, #d4e1ff);
  --color-information-200: var(--wp--custom--color--information--200, #a8c2ff);
  --color-information-300: var(--wp--custom--color--information--300, #7da4ff);
  --color-information-400: var(--wp--custom--color--information--400, #5185ff);
  --color-information-500: var(--wp--custom--color--information--500, #2667ff);
  --color-information-600: var(--wp--custom--color--information--600, #0046ea);
  --color-information-700: var(--wp--custom--color--information--700, #0035b0);
  --color-information-800: var(--wp--custom--color--information--800, #002375);
  --color-information-900: var(--wp--custom--color--information--900, #00123b);

  /* Success Colors */
  --color-success-50: var(--wp--custom--color--success--50, #f0fdf4);
  --color-success-100: var(--wp--custom--color--success--100, #dcfce7);
  --color-success-200: var(--wp--custom--color--success--200, #bbf7d0);
  --color-success-300: var(--wp--custom--color--success--300, #86efac);
  --color-success-400: var(--wp--custom--color--success--400, #4ade80);
  --color-success-500: var(--wp--custom--color--success--500, #22c55e);
  --color-success-600: var(--wp--custom--color--success--600, #16a34a);
  --color-success-700: var(--wp--custom--color--success--700, #15803d);
  --color-success-800: var(--wp--custom--color--success--800, #166534);
  --color-success-900: var(--wp--custom--color--success--900, #14532d);

  /* Warning Colors */
  --color-warning-50: var(--wp--custom--color--warning--50, #fcf3e8);
  --color-warning-100: var(--wp--custom--color--warning--100, #f6dcba);
  --color-warning-200: var(--wp--custom--color--warning--200, #f0c58d);
  --color-warning-300: var(--wp--custom--color--warning--300, #eaad5f);
  --color-warning-400: var(--wp--custom--color--warning--400, #e49631);
  --color-warning-500: var(--wp--custom--color--warning--500, #e18a1a);
  --color-warning-600: var(--wp--custom--color--warning--600, #cb7c17);
  --color-warning-700: var(--wp--custom--color--warning--700, #9e6112);
  --color-warning-800: var(--wp--custom--color--warning--800, #71450d);
  --color-warning-900: var(--wp--custom--color--warning--900, #442908);

  /* Error Colors */
  --color-error-50: var(--wp--custom--color--error--50, #fef2f2);
  --color-error-100: var(--wp--custom--color--error--100, #fee2e2);
  --color-error-200: var(--wp--custom--color--error--200, #fecaca);
  --color-error-300: var(--wp--custom--color--error--300, #fca5a5);
  --color-error-400: var(--wp--custom--color--error--400, #f87171);
  --color-error-500: var(--wp--custom--color--error--500, #ef4444);
  --color-error-600: var(--wp--custom--color--error--600, #dc2626);
  --color-error-700: var(--wp--custom--color--error--700, #b91c1c);
  --color-error-800: var(--wp--custom--color--error--800, #991b1b);
  --color-error-900: var(--wp--custom--color--error--900, #7f1d1d);

  /* Neutral Colors */
  --color-neutral-50: var(--wp--custom--color--neutral--50, #f2f3f4);
  --color-neutral-100: var(--wp--custom--color--neutral--100, #f8f8f8);
  --color-neutral-200: var(--wp--custom--color--neutral--200, #bfc1c3);
  --color-neutral-300: var(--wp--custom--color--neutral--300, #dadada);
  --color-neutral-400: var(--wp--custom--color--neutral--400, #8d8f91);
  --color-neutral-500: var(--wp--custom--color--neutral--500, #808285);
  --color-neutral-600: var(--wp--custom--color--neutral--600, #66686a);
  --color-neutral-700: var(--wp--custom--color--neutral--700, #4d4e50);
  --color-neutral-800: var(--wp--custom--color--neutral--800, #333435);
  --color-neutral-900: var(--wp--custom--color--neutral--900, #1a1b1c);

  /* White with varying opacity for overlays and emphasis */
  --color-white-alpha-50: var(--wp--custom--color--white-alpha--50, rgb(255 255 255 / 5%));
  --color-white-alpha-100: var(--wp--custom--color--white-alpha--100, rgb(255 255 255 / 10%));
  --color-white-alpha-200: var(--wp--custom--color--white-alpha--200, rgb(255 255 255 / 20%));
  --color-white-alpha-300: var(--wp--custom--color--white-alpha--300, rgb(255 255 255 / 30%));
  --color-white-alpha-400: var(--wp--custom--color--white-alpha--400, rgb(255 255 255 / 40%));
  --color-white-alpha-500: var(--wp--custom--color--white-alpha--500, rgb(255 255 255 / 50%));
  --color-white-alpha-600: var(--wp--custom--color--white-alpha--600, rgb(255 255 255 / 60%));
  --color-white-alpha-700: var(--wp--custom--color--white-alpha--700, rgb(255 255 255 / 70%));
  --color-white-alpha-800: var(--wp--custom--color--white-alpha--800, rgb(255 255 255 / 80%));
  --color-white-alpha-900: var(--wp--custom--color--white-alpha--900, rgb(255 255 255 / 90%));

  /* Black with varying opacity for overlays and emphasis */
  --color-black-alpha-50: var(--wp--custom--color--black-alpha--50, rgb(0 0 0 / 5%));
  --color-black-alpha-100: var(--wp--custom--color--black-alpha--100, rgb(0 0 0 / 10%));
  --color-black-alpha-200: var(--wp--custom--color--black-alpha--200, rgb(0 0 0 / 20%));
  --color-black-alpha-300: var(--wp--custom--color--black-alpha--300, rgb(0 0 0 / 30%));
  --color-black-alpha-400: var(--wp--custom--color--black-alpha--400, rgb(0 0 0 / 40%));
  --color-black-alpha-500: var(--wp--custom--color--black-alpha--500, rgb(0 0 0 / 50%));
  --color-black-alpha-600: var(--wp--custom--color--black-alpha--600, rgb(0 0 0 / 60%));
  --color-black-alpha-700: var(--wp--custom--color--black-alpha--700, rgb(0 0 0 / 70%));
  --color-black-alpha-800: var(--wp--custom--color--black-alpha--800, rgb(0 0 0 / 80%));
  --color-black-alpha-900: var(--wp--custom--color--black-alpha--900, rgb(0 0 0 / 90%));

    /* Spacing Scale */
  --spacing-0: 0;
  --spacing-4: 4px;
  --spacing-4-rem: 0.25rem;
  --spacing-8: 8px;
  --spacing-8-rem: 0.5rem;
  --spacing-16: 16px;
  --spacing-16-rem: 1rem;
  --spacing-24: 24px;
  --spacing-24-rem: 1.5rem;
  --spacing-32: 32px;
  --spacing-32-rem: 2rem;
  --spacing-40: 40;
  --spacing-40-rem: 2.5rem;
  --spacing-48: 48px;
  --spacing-48-rem: 3rem;
  --spacing-56: 56px;
  --spacing-56-rem: 3.5rem;
  --spacing-64: 64px;
  --spacing-64-rem: 4rem;
  --spacing-72: 72px;
  --spacing-72-rem: 4.5rem;
  --spacing-80: 80;
  --spacing-80-rem: 5rem;
  --spacing-96: 96px;
  --spacing-96-rem: 6rem;
  --spacing-112: 112px;
  --spacing-112-rem: 7rem;
  --spacing-128: 128px;
  --spacing-128-rem: 8rem;

  /* TYPESCALE */

  /* Body Large */
  --body-large-font: var(--typeface-family-body);
  --body-large-weight: var(--typeface-weight-body-medium);
  --body-large-letter-spacing: var(--typography-letter-spacing-default);
  --body-large-size: var(--wp--custom--font-size--body-large--min, 1rem);
  --body-large-line-height: 1.5;

  @media (min-width: 768px) {
    --body-large-size: 1.125rem;
    --body-large-line-height: 1.556;
  }

  @media (min-width: 1024px) {
    --body-large-size: var(--wp--custom--font-size--body-large--max, 1.25rem);
    --body-large-line-height: 1.4;
  }

  /* Body Small */
  --body-small-font: var(--typeface-family-body);
  --body-small-weight: var(--typeface-weight-body-medium);
  --body-small-letter-spacing: var(--typography-letter-spacing-default);
  --body-small-size: var(--wp--custom--font-size--body-small--min, 0.938rem);
  --body-small-line-height: 1.066;


  @media (min-width: 768px) {
    --body-small-size: var(--wp--custom--font-size--body-small--max, 1rem);
    --body-small-line-height: 1.6;
  }

  @media (min-width: 1024px) {
    --body-small-size: var(--wp--custom--font-size--body-small--max, 1rem);
    --body-small-line-height: 1.6;
  }
  
  /* Display Large */
  --display-large-font: var(--typeface-family-display);
  --display-large-weight: var(--typeface-weight-display-medium);
  --display-large-letter-spacing: var(--typography-letter-spacing-default);
  --display-large-size: var(--wp--custom--font-size--display-large--min, 1.75rem);
  --display-large-line-height: 1.143;

  @media (min-width: 768px) {
    --display-large-size: var(--wp--custom--font-size--display-large--max, 3.25rem);
    --display-large-line-height: 1.115;
  }

  @media (min-width: 1024px) {
    --display-large-size: var(--wp--custom--font-size--display-large--max, 3.25rem);
    --display-large-line-height: 1.115;
  }

  /* Heading Large */
  --heading-large-font: var(--typeface-family-display);
  --heading-large-weight: var(--typeface-weight-display-medium);
  --heading-large-letter-spacing: var(--typography-letter-spacing-default);
  --heading-large-size: var(--wp--custom--font-size--heading-large--min, 1.625rem);
  --heading-large-line-height: 1.231;

  @media (min-width: 768px) {
    --heading-large-size: var(--wp--custom--font-size--heading-large--max, 2.688rem);
    --heading-large-line-height: 1.209;
  }

  @media (min-width: 1024px) {
    --heading-large-size: var(--wp--custom--font-size--heading-large--max, 2.688rem);
    --heading-large-line-height: 1.209;
  }

  /* Heading Medium */
  --heading-medium-font: var(--typeface-family-display);
  --heading-medium-weight: var(--typeface-weight-display-medium);
  --heading-medium-letter-spacing: var(--typography-letter-spacing-default);
  --heading-medium-size: var(--wp--custom--font-size--heading-medium--min, 1.5rem);
  --heading-medium-line-height: 1;

  @media (min-width: 768px) {
    --heading-medium-size: var(--wp--custom--font-size--heading-medium--max, 2.063rem);
    --heading-medium-line-height: 1.212;
  }

  @media (min-width: 1024px) {
    --heading-medium-size: var(--wp--custom--font-size--heading-medium--max, 2.063rem);
    --heading-medium-line-height: 1.212;
  }

  /* Heading Small */
  --heading-small-font: var(--typeface-family-display);
  --heading-small-weight: var(--typeface-weight-display-medium);
  --heading-small-letter-spacing: var(--typography-letter-spacing-default);
  --heading-small-size: var(--wp--custom--font-size--heading-small--min, 1.313rem);
  --heading-small-line-height: 1.333;

  @media (min-width: 768px) {
    --heading-small-size: var(--wp--custom--font-size--heading-small--max, 1.813rem);
    --heading-small-line-height: 1.241;
  }

  @media (min-width: 1024px) {
    --heading-small-size: var(--wp--custom--font-size--heading-small--max, 1.813rem);
    --heading-small-line-height: 1.241;
  }

  /* Heading X-Small */
  --heading-x-small-font: var(--typeface-family-display);
  --heading-x-small-weight: var(--typeface-weight-display-medium);
  --heading-x-small-letter-spacing: var(--typography-letter-spacing-default);
  --heading-x-small-size: var(--wp--custom--font-size--heading-x-small--min, 1.25rem);
  --heading-x-small-line-height: 1.5;

  @media (min-width: 768px) {
    --heading-x-small-size: var(--wp--custom--font-size--heading-x-small--max, 1.4375rem);
    --heading-x-small-line-height: 1.73;
  }

  @media (min-width: 1024px) {
    --heading-x-small-size: var(--wp--custom--font-size--heading-x-small--max, 1.4375rem);
    --heading-x-small-line-height: 1.73;
  }

  /* Label X-Large */
  --label-x-large-font: var(--typeface-family-body);
  --label-x-large-weight: var(--typeface-weight-body-bold);
  --label-x-large-letter-spacing: var(--typography-letter-spacing-default);
  --label-x-large-size: var(--wp--custom--font-size--label-x-large--min, 1rem);
  --label-x-large-line-height: 1.5;

  @media (min-width: 768px) {
    --label-x-large-size: var(--wp--custom--font-size--label-x-large--max, 1.125rem);
    --label-x-large-line-height: 1.333;
  }

  @media (min-width: 1024px) {
    --label-x-large-size: var(--wp--custom--font-size--label-x-large--max, 1.125rem);
    --label-x-large-line-height: 1.333;
  }

  /* Label Large */
  --label-large-font: var(--typeface-family-body);
  --label-large-weight: var(--typeface-weight-body-medium);
  --label-large-letter-spacing: var(--typography-letter-spacing-default);
  --label-large-size: var(--wp--custom--font-size--label-large--min, 0.938rem);
  --label-large-line-height: 1.333;

  @media (min-width: 768px) {
    --label-large-size: var(--wp--custom--font-size--label-large--max, 1rem);
    --label-large-line-height: 1.5;
  }

  @media (min-width: 1024px) {
    --label-large-size: var(--wp--custom--font-size--label-large--max, 1rem);
    --label-large-line-height: 1.5;
  }

  /* Label Medium */
  --label-medium-font: var(--typeface-family-body);
  --label-medium-weight: var(--typeface-weight-body-bold);
  --label-medium-letter-spacing: var(--typography-letter-spacing-default);
  --label-medium-size: var(--wp--custom--font-size--label-medium--min, 0.875rem);
  --label-medium-line-height: 2.143;

  @media (min-width: 768px) {
    --label-medium-size: var(--wp--custom--font-size--label-medium--min, 0.875rem);
    --label-medium-line-height: 2.143;
  }

  @media (min-width: 1024px) {
    --label-medium-size: var(--wp--custom--font-size--label-medium--min, 0.875rem);
    --label-medium-line-height: 2.143;
  }

  /* Label Small */
  --label-small-font: var(--typeface-family-body);
  --label-small-weight: var(--typeface-weight-body-medium);
  --label-small-letter-spacing: var(--typography-letter-spacing-default);
  --label-small-size: var(--wp--custom--font-size--label-small--min, 0.75rem);
  --label-small-line-height: 1.333;

  @media (min-width: 768px) {
    --label-small-size: var(--wp--custom--font-size--label-small--min, 0.75rem);
    --label-small-line-height: 1.333;
  }

  @media (min-width: 1024px) {
    --label-small-size: var(--wp--custom--font-size--label-small--min, 0.75rem);
    --label-small-line-height: 1.333;
  }

  /* Title Large */
  --title-large-font: var(--typeface-family-display);
  --title-large-weight: var(--typeface-weight-display-medium);
  --title-large-letter-spacing: var(--typography-letter-spacing-default);
  --title-large-size: var(--wp--custom--font-size--title-large--min, 1.125rem);
  --title-large-line-height: 1.333;

  @media (min-width: 768px) {
    --title-large-size: var(--wp--custom--font-size--title-large--max, 1.438rem);
    --title-large-line-height: 1.391;
  }

  @media (min-width: 1024px) {
    --title-large-size: var(--wp--custom--font-size--title-large--max, 1.438rem);
    --title-large-line-height: 1.391;
  }

  /* Title Small */
  --title-small-font: var(--typeface-family-display);
  --title-small-weight: var(--typeface-weight-display-medium);
  --title-small-letter-spacing: var(--typography-letter-spacing-default);
  --title-small-size: var(--wp--custom--font-size--title-small--min, 1rem);
  --title-small-line-height: 1.5;

  @media (min-width: 768px) {
    --title-small-size: var(--wp--custom--font-size--title-small--max, 1.125rem);
    --title-small-line-height: 1.556;
  }

  @media (min-width: 1024px) {
    --title-small-size: var(--wp--custom--font-size--title-small--max, 1.125rem);
    --title-small-line-height: 1.556;
  }

}