: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);
  --black-45: rgba(54, 49, 48, 0.45);

  /* -- 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-20: calc(20px * 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 */

  /* -- SETUPP -- */
  --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 */
  --max-w: 1440px;

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

  /* Font sizes */
  --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);
  --f-sz-h-1: var(--text-72);
  --f-sz-h-2: var(--text-64);
  --f-sz-h-4: var(--text-28);
  --f-sz-h-3: var(--text-40);
  --f-sz-h-5: var(--text-24);
  --f-sz-h-6: var(--text-16);

  /* 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);
  --col-bg-section-title: var(--black-100);

  /* TEXT */
  --col-txt-section-title: var(--white-100);
  --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);
  --col-shadow: var(--black-45);

  /* ------------------------------------------------------------ STYLES -- */
  /* SHADOWS */
  --shadow-down: 0 var(--Shadow-Distance, 40px) var(--Shadow-Blur, 52px)
    var(--Shadow-Spread, -40px) var(--col-shadow);

  /* ------------------------------------------------------------ ===== LAYOUT ===== ---------- */
  /* ------------------------------------------------------------ SPACING -- */
  /* new (delete comment when done reconstructing) */
  /* SIZING */
  --height-nav: 10vh;
  --height-hero: 100vh;
  --height-max-img-v: 65vh;
  /* GAPS */
  --gap-page-sections: var(--gap-sp-80);
  --gap-within-sections: var(--gap-sp-64);
  --gap-p-break: var(--gap-sp-32);
  --gap-l-break: var(--gap-sp-12);
  --gap-flex: var(--gap-sp-40);
  --gap-list: var(--gap-sp-24);
  --gap-btn-icon: var(--gap-sp-8);
  /* PADDING */
  --pad-page: var(--pad-sp-24);
  --pad-title: var(--pad-sp-12);
  --pad-card: var(--pad-sp-24);
  --pad-nav: var(--pad-sp-20);

  /* old */
  /* --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); */
}

/* ---------- 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);
}
*/