:root {
  /* Colors - toned down versions */
  --primary-bg-color: #1b1f22; /* Keep this dark gray */
  --primary-content-bg-color: rgba(
    27,
    31,
    34,
    0.85
  ); /*  rgba(42, 45, 58, 0.9); Keep this dark gray */
  --bg-color: rgba(27, 31, 34, 1);
  --text-color: #f8f8f8; /* Slightly off-white */
  --border-color: #e0e0e0; /* Light gray instead of pure white */
  --overlay-color: rgba(248, 248, 248, 0.5); /* Off-white with transparency */
  --overlay-color-strong: rgba(
    248,
    248,
    248,
    0.075
  ); /* Off-white with strong transparency */
  --overlay-color-stronger: rgba(
    248,
    248,
    248,
    0.175
  ); /* Off-white with medium transparency */
  --gradient-overlay: rgba(30, 30, 30, 0.25); /* Dark gray instead of pure black */
  --gradient-overlay-transparent: rgba(30, 30, 30, 0); /* Transparent dark gray */
  --header-bg-color: #121212; /* Very dark gray instead of pure black */
  --special-link-color: #ebd3d3;

  /* Fonts */
  --font-family-titles: "Playfair Display", serif;
  --font-family-romantic: "Style Script";
  --font-family-text: "Manrope", sans-serif;
  --font-family-mono: "JetBrains Mono", monospace;

  /* Font sizes */
  --font-size-base: 16pt;
  --font-size-large: 12pt;
  --font-size-medium: 11pt;
  --font-size-small: 10pt;
  --font-size-rem: 1rem;
  --font-size-h1: 3.3rem;
  --font-size-h2: 1.5rem;
  --font-size-h3: 1rem;
  --font-size-h4: 0.8rem;
  --font-size-h5: 0.7rem;
  --font-size-h6: 0.6rem;
  --font-size-text: 1.1rem;
  --font-size-small-text: 0.8rem;
  --font-size-smaller: 0.9rem;
  --font-size-button: 0.8rem;
  --font-size-button-small: 0.6rem;

  /* Images/URLs */
  --close-icon-url: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='20px' height='20px' viewBox='0 0 20 20' zoomAndPan='disable'%3E%3Cstyle%3Eline %7B stroke: %23f8f8f8%3B stroke-width: 1%3B %7D%3C/style%3E%3Cline x1='2' y1='2' x2='18' y2='18' /%3E%3Cline x1='18' y1='2' x2='2' y2='18' /%3E%3C/svg%3E");
  --select-arrow-url: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='%23f8f8f8' /%3E%3C/svg%3E");
}