:root {
  /* Colours */
  --color-primary: #2C55A2;
  --color-primary-light: #5692CE;
  --color-primary-dark: #254685;
  --color-secondary: #F4E718;
  --color-primary-gradient: linear-gradient(0deg, var(--color-primary) 0%, var(--color-primary-light) 100%);

  /*
    Grey Scale
    In this section, we define our greys; let's not have 50 shades
  */
  --color-white: #ffffff;
  --color-neutral-100: #E8E8E8;
  --color-neutral-200: #F0F0F0;
  --color-neutral-300: #D7D8D6;
  --color-neutral-400: #AFB6BD;
  --color-neutral-500: #36383A;
  --color-neutral-600: #050505;
  --color-neutral-700: #0B0B0B;
  --color-neutral-800: #111111;
  --color-black: #000000;

  /* Fonts */
  --font-family-primary: 'Roboto Flex Variable', sans-serif;
  --font-family-secondary: 'CabinetGrotesk Variable', sans-serif;

  /* Font weight */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  /* Font Sizes */
  /* Static Font Sizes */
  --base-font-size: 1rem;
  --font-size-small-b: calc(var(--base-font-size) * 0.875);
  --font-size-medium: calc(var(--base-font-size) * 1);
  --font-size-large: calc(var(--base-font-size) * 1.125);
  --font-size-large-a: calc(var(--base-font-size) * 1.3125);
  --font-size-large-b: calc(var(--base-font-size) * 1.75);
  --font-size-large-c: calc(var(--base-font-size) * 2.1875);
  --font-size-large-d: calc(var(--base-font-size) * 2.625);
  --font-size-large-e: calc(var(--base-font-size) * 3.5);
  --font-size-large-f: calc(var(--base-font-size) * 4.375);
  --font-size-large-g: calc(var(--base-font-size) * 6.5625);

  /* Responsive Font Sizes */
  /* Body text */
  --font-size-responsive-from-medium-to-large: clamp(var(--font-size-medium), 2vw, var(--font-size-large));
  /* H1 homepage */
  --font-size-responsive-from-large-d-to-large-f: clamp(var(--font-size-large-d), 9vw, var(--font-size-large-e));
  /* H1 */
  --font-size-responsive-from-large-d-to-large-e: clamp(var(--font-size-large-d), 9vw, var(--font-size-large-e));
  /* stats */
  --font-size-responsive-from-large-c-to-large-e: clamp(var(--font-size-large-c), 9vw, var(--font-size-large-g));
  /* H2 */
  --font-size-responsive-from-large-c-to-large-d: clamp(var(--font-size-large-c), 6vw, var(--font-size-large-d));
  /* teaser */
  --font-size-responsive-from-medium-to-large-a: clamp(var(--font-size-medium), 1vw, var(--font-size-large-a));

  /* Applying Font Sizes */
  --font-size-body: var(--font-size-responsive-from-medium-to-large);
  --font-size-responsive-xxxxxx-large: var(--font-size-responsive-from-large-c-to-large-e);
  --font-size-responsive-xxxxx-large: var(--font-size-responsive-from-large-d-to-large-f);
  --font-size-responsive-xxxx-large: var(--font-size-responsive-from-large-d-to-large-e);
  --font-size-responsive-xxx-large: var(--font-size-responsive-from-large-c-to-large-d);
  --font-size-responsive-xx-large: var(--font-size-responsive-from-medium-to-large-a);
  --font-size-responsive-x-large: var(--font-size-large-b);

  /* Heading font-weight */
  --heading-font-weight: var(--font-weight-black);
  --font-size-xxxxxx-font-weight: var(--heading-font-weight);
  --font-size-xxxxx-large-font-weight: var(--heading-font-weight);
  --font-size-xxxx-large-font-weight: var(--heading-font-weight);
  --font-size-xxx-large-font-weight: var(--font-weight-bold);
  --font-size-xx-large-font-weight: var(--font-weight-bold);
  --font-size-x-large-font-weight: var(--font-weight-bold);
  --font-size-large-font-weight: var(--heading-font-weight);

  /* Line Heights */
  --line-height: 1.75;
  --line-height-x: 1;
  --line-height-xx: 1.25;
  --line-height-xxx: 1.3;
  --line-height-xxxx: 1.6;

  /* Heading line-height */
  --font-size-xxxxxx-line-height: var(--line-height-x);
  --font-size-xxxxx-large-line-height: var(--line-height-x);
  --font-size-xxxx-large-line-height: var(--line-height-x);
  --font-size-xxx-large-line-height: var(--line-height-xx);
  --font-size-xx-large-line-height: var(--line-height-xx);
  --font-size-x-large-line-height: var(--line-height-xx);
  --font-size-large-line-height: var(--line-height);

  /* Spacing Items */
  --spacing: 1rem;
  --spacing-tiny: 1px;
  --spacing-small: calc(var(--spacing) * 0.625); /* 10 */
  --spacing-medium: var(--spacing);
  --spacing-large: calc(var(--spacing) * 1.25); /* 20 */
  --spacing-xlarge: calc(var(--spacing) * 1.875); /* 30 */
  --spacing-xxlarge: calc(var(--spacing) * 2.5); /* 40 */
  --spacing-xxxlarge: calc(var(--spacing) * 3.125); /* 50 */
  --spacing-xxxxlarge: calc(var(--spacing) * 3.75); /* 60 */
  --spacing-xxxxxlarge: calc(var(--spacing) * 6.25); /* 100 */

  /* Widths */
  --width-small: 625px;
  --width-medium: 768px;
  --width-large: 960px;
  --width-xlarge: 1280px;
  --width-xxlarge: 1440px;
  --width-xxxlarge: 1920px;
  --width-xxxxlarge: 2160px;
  --width-full-container: 100%;
  --width-content-area: var(--width-xlarge);

  /* Borders */
  --border-width: var(--spacing-tiny);
  --border-width-large: var(--spacing-xsmall);
  --border-radius: var(--spacing-small);
  --border-radius-large: 10rem; /* Large value to accomodate for multiline  buttons. */
  --border-color: var(--color-grey-light-a);
  --border-color-dark: var(--color-grey-dark-b);
  --border-color-light: var(--color-grey-light-aa);
  --border-style: solid;
  --border: var(--border-width) var(--border-style) var(--border-color);
  --border-large: var(--border-width-large) var(--border-style) var(--border-color);
  --border-dark: var(--border-width) var(--border-style) var(--border-color-dark);
  --border-light: var(--border-width) var(--border-style) var(--border-color-light);

  /* Animation */
  --transition-time: 0.3s;

  /* Shadow */
  --zevi-shadow-1: 0 1px 20px 0 hsla(0, 0%, 0%, 0.25);
  --zevi-shadow-2: 0 2px 8px 0 hsla(0, 0%, 0%, 0.18);
  --zevi-shadow-3: 0 7px 14px 0 hsla(0, 0%, 0%, 0.15);

  /* Blur */
  --zevi-blur-1: 2px;

  /* Overlays */
  --zevi-overlay-1: hsla(0, 0%, 0%, 0.20);
  --zevi-overlay-2: linear-gradient(180deg, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, 0.75) 100%);
  --zevi-overlay-3: var(--zevi-overlay-2), var(--zevi-overlay-1);
  --zevi-overlay-2-inverse: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, 0.75) 100%);

  /* Grids */
  --grid-columns: 12;
  --grid-gap: var(--spacing-xlarge);
  --grid-gap-none: 0;
  --grid-gap-small: var(--spacing-small);
  --grid-gap-large: var(--spacing-large);

  /* Text */
  --font-size: var(--font-size-body);

  /* Navigation */
  --underline-offset: 7px;

  /* Hero */
  --hero-border-radius: var(--border-radius);
  --hero-width-small: 53rem;
  --hero-width-large: var(--width-xlarge);

  /* Hero – homepage */
  --zevi-homepage-overlay: linear-gradient(-90deg, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, 0.20) 100%), hsla(0, 0%, 0%, 0.30);

  /* CTA button */
  --zevi-cta-button-background: var(--color-secondary);
  --zevi-cta-button-foreground: var(--color-black);
  --zevi-cta-button-background-hover: var(--color-primary-dark);
  --zevi-cta-button-foreground-hover: var(--color-white);
  --zevi-cta-button-background-alternative: var(--color-primary-dark);
  --zevi-cta-button-foreground-alternative: var(--color-white);
  --zevi-cta-button-background-alternative-hover: var(--color-white);
  --zevi-cta-button-foreground-alternative-hover: var(--color-primary-dark);
  --zevi-cta-button-border-radius: var(--border-radius-large);

  /* CTA block */
  --zevi-cta-background: var(--color-primary-gradient);

  /* Stats */
  --zevi-stast-footer-background: var(--color-white);
  --zevi-stast-footer-text: var(--color-black);
  --zevi-stats-overlay: var(--zevi-overlay-3);
  --zevi-stats-content-text: var(--color-white);

  /* Quote */
  --zevi-quote-overlay: var(--zevi-overlay-3);
  --zevi-quote-quote-icon-width: 6rem;
  --zevi-quote--quote-icon-color: var(--color-secondary);
  --zevi-quote-content-text: var(--color-white);

  /* Accordion */
  --zevi-accordion-trigger-background: var(--color-white);
  --zevi-accordion-trigger-foreground: var(--color-black);
  --zevi-accordion-trigger-hover-background: var(--color-primary);
  --zevi-accordion-trigger--hover-foreground: var(--color-white);
  --zevi-accordion-response-background: var(--color-neutral-200);
  --zevi-accordion-response-foreground: var(--color-black);
  --zevi-accordion-response-link: var(--color-primary);
  --zevi-accordion-cta-border-color: var(--color-white);
  --zevi-accordion-cta-color: var(--color-white);
  --zevi-accordion-cta-hover-background: var(--color-secondary);
  --zevi-accordion-cta-hover-color: var(--color-black);

  /* Search */
  --zevi-pager-item-hover-background-color: var(--color-secondary);
  --zevi-pager-item-hover-color: var(--color-black);
  --zevi-pager-item-hover-border-color: var(--color-secondary);
  --zevi-highlight-color: var(--color-black);
  --zevi-highlight-background: var(--color-secondary);

  /* Forms */
  --zevi-input-text-color: var(--color-black);
  --zevi-input-text-background: var(--color-white);
  --zevi-input-text-border-color: var(--color-black);

  /* Tags */
  --zevi-tags-hover-color: var(--color-black);
  --zevi-tags-background-color: transparent;
  --zevi-tags-hover-background-color: var(--color-secondary);
  --zevi-tags-hover-border-color: var(--color-secondary);

  /* Signup block */
  --zevi-signup-background: var(--color-neutral-700);
  --zevi-signup-foreground: var(--color-white);
  --zevi-signup-button-foreground: var(--color-white);
  --zevi-signup-button-foreground-hover: var(--color-black);
}

/* Default theme (dark) */
body,
body.zevi-theme-dark,
body.off-canvas-is-on-canvas,
body.zevi-theme-light .off-canvas {
  --zevi-default-body-background: var(--color-neutral-700);
  --zevi-default-body-foreground: var(--color-white);
  --zevi-default-logo-colour: var(--color-white);
  --default-colour: var(--color-white);
  --color-link: var(--color-white);
  --hero-caption-color: var(--color-white);
  --zevi-pager-item-color: var(--color-white);
  --zevi-pager-item-border-color: var(--color-white);
  --zevi-tags-color: var(--color-white);
  --zevi-tags-border-color: var(--color-white);
  --zevi-node-related-background: var(--color-neutral-800);
}

body.zevi-theme-light {
  --zevi-default-body-background: var(--color-neutral-100);
  --zevi-default-body-foreground: var(--color-neutral-800);
  --zevi-default-logo-colour: var(--color-primary);
  --default-colour: var(--color-neutral-800);
  --color-link: var(--color-neutral-800);
  --hero-caption-color: var(--color-neutral-500);
  --zevi-accordion-cta-border-color: var(--color-black);
  --zevi-accordion-cta-color: var(--color-black);
  --zevi-pager-item-color: var(--color-black);
  --zevi-pager-item-border-color: var(--color-black);
  --zevi-tags-color: var(--color-black);
  --zevi-tags-border-color: var(--color-black);
  --zevi-node-related-background: var(--color-neutral-300);
}