:root {
  /* Font */
  --f-f: "Inter", sans-serif;
  --f-f_s: "Manrope", sans-serif;
  --f-lexend: "Lexend", sans-serif;
  --f-f-code: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
    'Courier New', monospace;
  --f-s_root: 1rem;
  --f-s_base: 1rem;
  --f-s_sm: 0.875em;

  /* Font weight*/
  --f-w_light: 300;
  --f-w_base: 400;
  --f-w_medium: 500;
  --f-w_bold: 700;
  --f-w_black: 900;

  /* Line height */
  --l-h: 1.5;

  /* Transition */
  --t-t: 0.25s;
  --t--b: all var(--t-t) ease-in-out;

  /* Body */
  --body_c: #111;
  --body_bg: var(--c-white, #fff);

  /* Link */
  --link_c: var(--c-primary);
  --link_c_h: var(--c-secondary);
  --link_d: underline;

  /* Border */
  --b-w: 1px;
  --b-c: var(--c-gray-300);
  --b-s: solid;
  --b-r: 2px;
  --b-r_sm: 0.25rem;
  --b-r_lg: 0.5rem;
  --b-r_xl: 1rem;
  --b-r_pill: 100rem;

  /* Line */
  --hr_m-b: var(--spacer);
  --hr_c: inherit;
  --hr_b-w: var(--b-w);
  --hr_b-c: transparent;
  --hr_opacity: 0.25;

  /* Heading */
  --h_f-f: var(--f-f_s);
  --h-fstyle: inherit;
  --h-fw: 500;
  --h-lh: 1.2;
  --h-c: inherit;

  --f-s_h1: clamp(1.625rem, 1rem + 1.667vw, 2.5rem); /* 26px -> 40px */
  --f-s_h2: clamp(1.375rem, 0.929rem + 1.19vw, 2rem); /* 22px -> 32px */
  --f-s_h3: clamp(1.25rem, 0.893rem + 0.952vw, 1.75rem); /* 20px -> 28px */
  --f-s_h4: 1.5rem;
  --f-s_h5: 1.25rem;
  --f-s_h6: 1rem;

  --h1_mb: 2.5rem;
  --h2_mb: 1.75rem;
  --h3_mb: 1.5rem;
  --h4_mb: 1.25rem;
  --h5_mb: 0rem;

  /* Heading */
  --h_f-f: var(--f-f);
  --h_f-style: inherit;
  --h_f-w: var(--f-w_semibold);
  --h_l-h: 1.2;
  --h_c: var(--c-primary-dark);

  --h1_f-s: 3.5rem;
  --h2_f-s: 2rem;
  --h3_f-s: 1.75rem;
  --h4_f-s: 1.5rem;
  --h5_f-s: 1.25rem;
  --h6_f-s: 1rem;

  --h1_m-b: 0.75em;
  --h2_m-b: 0.50rem;
  --h3_m-b: 0.35rem;
  --h4_m-b: 0.25rem;
  --h5_m-b: 0.1rem;
  --h6_m-b: 0rem;

  /* Font weight */
  --f-w_lighter: lighter;
  --f-w_light: 300;
  --f-w_normal: 400;
  --f-w_semibold: 600;
  --f-w_bold: 700;
  --f-w_bolder: bolder;

  /* Font weight */
  --f-w_lighter: lighter;
  --f-w_light: 300;
  --f-w_normal: 400;
  --f-w_semibold: 600;
  --f-w_bold: 700;
  --f-w_bolder: bolder;

  /* Sizes */
  --spacer: 0.75rem;
  --s-0: 0;
  --s-1: var(--spacer);
  --s-2: calc(var(--spacer) * 2);
  --s-3: calc(var(--spacer) * 3);
  --s-4: calc(var(--spacer) * 4);
  --s-5: calc(var(--spacer) * 5);

  --gutter: 1.25rem;

  --header_h: 5.125rem;

  /* z-index */
  --z-dropdown: 80;
  --z-sticky: 100;
  --z-fixed: 120;
  --z-offcanvas-backdrop: 140;
  --z-offcanvas: 150;
  --z-modal-backdrop: 160;
  --z-modal: 180;
  --z-popover: 200;
  --z-tooltip: 220;
  --z-toast: 240;

  /* Colors */
  --c-primary: #00aeef;
  --c-secondary: #4c9f38;
  --c-accent: #81a1c1;
  --c-tertiary: #2c2c2c;
  --c-neutral: #4c566a;
  --c-gray: #828282;
  --c-info: #0dcaf0;
  --c-success: #198754;
  --c-warning: #ffc107;
  --c-danger: #dc3545;

  --c-white: #ffffff;
  --c-black: #000000;
  --c-earth: #9c4e00;

  /* custom colors */
  --c-muted: var(--c-gray-400);
  --c-light: var(--c-gray-900);
  --c-dark: #666666;

  /* Figma design tokens (Sponge Knowledge Platform library) */
  --c-blue: #0081cc;
  --c-earth: #9c4e00;
  --c-earth-dark: #804000;
  --c-text: #222222;
  --c-title-main: #000000;
  --c-gray-dim: #222222;
  --c-gray-ultralight: #f6f6f6;

  /* Figma "Width & Spacing/Max Width" — the design's content measure. */
  --w-max: 88.125rem;

  /* Container */
  --gap: 1.875rem;
  --container_p-i: 20Px;
  --container_m-w: calc(100% - var(--container_p-i) * 2);

  /* Gallery */
}

  @media (min-width: 48rem) {

  :root {
    --mode: md;
    --container_m-w: 720Px;
}
  }

  @media (min-width: 62rem) {

  :root {
    --mode: lg;
    --container_m-w: 950Px;
}
  }

  @media (min-width: 75rem) {

  :root {
    --mode: xl;
    --container_m-w: 1140Px;
}
  }

  @media (min-width: 87.5rem) {

  :root {
    --mode: xxl;
    /* Figma design system: "Width & Spacing/Max Width" = 1410. The min()
       keeps a 20px gutter between the xxl breakpoint (1400px) and 1450px. */
    --container_m-w: min(1410Px, calc(100% - 2.5rem));
}
  }

  @media (--xxxl) {

  :root {
    --mode: xxxl;
    --container_m-w: 1440Px;
}
  }

  :root {
  --_gallery_c: var(--body_c, #999);
  --_gallery_bg: var(--body_bg, #000);
  --_gallery_c_accent: var(--c-primary, #a90707);
  --_gallery_bc: var(--bc, #999);
  --_gallery_bw: var(--bw, 1px);
  --_gallery_br: var(--br, 8px);

  --_btn_f-s: 0.875rem;
  --_btn_l-h: 1.5;
}