:root {
  /* ---------- PRIMITIVES ---------- */
  /* COLORS */
  --white-100: rgba(250, 250, 250, 1);
  --black-100: rgba(54, 49, 48, 1);
  --black-60: rgba(54, 49, 48, 0.6);
  --red-100: rgba(230, 76, 115, 1);
  --blue-100: rgba(88, 159, 198, 1);

  /* -- DISTANCE -- */
  /* PADDING/MARGINS - SCALE UP A LOT */
  --pad-sp-2: calc(2px * var(--padding-scale));
  --pad-sp-4: calc(4px * var(--padding-scale));
  --pad-sp-8: calc(8px * var(--padding-scale));
  --pad-sp-12: calc(12px * var(--padding-scale));
  --pad-sp-16: calc(16px * var(--padding-scale));
  --pad-sp-24: calc(24px * var(--padding-scale));
  --pad-sp-28: calc(28px * var(--padding-scale));

  /* GAPS / SPACING - MINOR SCALING */
  --gap-sp-2: calc(2px * var(--gap-scale));
  --gap-sp-4: calc(4px * var(--gap-scale));
  --gap-sp-8: calc(8px * var(--gap-scale));
  --gap-sp-12: calc(12px * var(--gap-scale));
  --gap-sp-16: calc(16px * var(--gap-scale));
  --gap-sp-20: calc(20px * var(--gap-scale));
  --gap-sp-24: calc(24px * var(--gap-scale));
  --gap-sp-28: calc(28px * var(--gap-scale));
  --gap-sp-32: calc(32px * var(--gap-scale));
  --gap-sp-40: calc(40px * var(--gap-scale));
  --gap-sp-48: calc(48px * var(--gap-scale));
  --gap-sp-64: calc(64px * var(--gap-scale));
  --gap-sp-80: calc(80px * var(--gap-scale));

  /* LOCKED SIZES - NO SCALING*/
  --l-sp-16: 16px;
  --l-sp-28: 28px;

  /* FONT SIZES */
  --text-12: 0.75rem;
  --text-14: 0.88rem;
  --text-16: 1rem;
  --text-18: 1.13rem;
  --text-20: 1.25rem;
  --text-24: 1.5rem;
  --text-28: 1.75rem;
  --text-32: 2rem;
  --text-40: 2.5rem;
  --text-48: 3rem;
  --text-56: 3.5rem;
  --text-64: 4rem;
  --text-72: 4.5rem;

  /* BORDER RADIUS */
  --br-16: 16px;
  --br-round: 999px;

  /* ---------- THEME ---------- */
  /* Semantic variables - for actual use */
  /* SPACING SETUP */
  --root-font-size: 16px;
  --padding-scale: 1; /* Default responsive scale for padding */
  --gap-scale: 1; /* Default responsive scale for gaps (space between) */
  --touch-min: 44px; /* Defines a minimum area for touch elements */

  /* -- FONT -- */
  --font-fam: "Poppins", sans-serif;
  /* TYPE ELEMENTS */

  --f-sz-p: var(--text-16);
  --f-sz-p-large: var(--text-20);
  --f-sz-p-small: var(--text-14);
  --f-sz-p-caption: var(--text-12);
  --f-sz-blockquote: var(--text-24);
  /* Line-heights */
  --lh-label: 1em;
  --lh-heading: 1.1em;
  --lh-copy: 2.4em;
  /* Weights */
  --wt-regular: 400; /* SUB-HEADINGS and BODY COPY */
  --wt-medium: 500; /* MINOR HEADINGS */
  --wt-bold: 700; /* MAJOR HEADINGS */

  /* -- COLORS -- */
  /* BG */
  --bg-page: var(--white-100);
  --bg-content: var(--white-100);
  --bg-nav: rgba(255, 255, 255, 0);
  --bg-card: rgba(242, 243, 243, 1);
  --bg-reverse: var(--black-100);

  /* TEXT */
  --text-1-color: var(--black-100);
  --text-2-color: var(--black-60);
  --text-rev-color: var(--bg-content);
  --text-hl-color: var(--red-100);
  --text-title-main-color: var(--blue-100);

  /* BUTTONS */
  --btn-primary-default: var(--text-1-color);
  --btn-default-op: 1;
  --btn-hover-op: 0.6;
  --btn-active-op: 0.4;
  --btn-focus-op: 1;

  /* UI */
  --ui-hl: var(--red-100);

  /* -- SPACING -- */
  /* GAPS */
  --gap-line-break: var(--gap-sp-12);
  --gap-p-break: var(--gap-sp-20);
  --gap-flex-ltr: var(--gap-sp-40);
  --gap-page-segments: var(
    --gap-sp-64
  ); /* gap between main sections of content */
  --gap-top-bar-items: var(--gap-sp-16); /* gap between top bar items */
  --gap-top-bar-item: var(--gap-sp-4); /* gap within top bar item */
  /* PADDING */
  --pad-section: var(--pad-sp-24);
  --pad-card: var(--pad-sp-24);
  --pad-top-bar-nav-item: var(--pad-sp-8) var(--pad-sp-12);
  /* BORDER RADIUS */
  --br-card: var(--br-16);
  /* MISC SIZE */
  --hor-scroll-card-w: 33vw;
  --height-nav: 10vh;
}

/* ---------- PER DEVICE THEMING * ---------- */
/* Phone: <768px */
@media (max-width: 767.98px) {
  :root {
    --padding-scale: 1;
    --gap-scale: 1;
    --root-font-size: 16px;
    --hor-scroll-card-w: 70vw;
  }
}

/* Tablet: 768–1024px */
@media (min-width: 768px) and (max-width: 1024px) {
  :root {
    --padding-scale: 1;
    --gap-scale: 1;
    --root-font-size: 16px;
  }
}

/* Desktop: 1025–1366px */
@media (min-width: 1025px) and (max-width: 1366px) {
  :root {
    --padding-scale: 1.5;
    --gap-scale: 1.1;
    --root-font-size: 16px;
  }
}

/* XL-Desktop: >1366px */
@media (min-width: 1367px) {
  :root {
    --padding-scale: 2;
    --gap-scale: 1.2;
    --root-font-size: 16px;
  }
}

/* Example Usage 
body {
  background-color: var(--color-white);
}

p,
a {
  color: var(--color-black);
  font-family: var(--font-sans);
}

h1 {
  font-family: var(--font-serif);
}
*/