:root {
  /* Dark and white colors */
  --color-dark: #2f3234;
  --color-light: #d0d0d0;

  /* Primary colors */
  --color-primary: #a63d30;
  --color-primary-dark: #101f2b;
  /* 30% darker than primary */
  --color-primary-light: var(--color-light);
  /* 30% lighter than primary */
  /* Secondary colors */
  --color-secondary: var(--color-dark);
  --color-secondary-dark: var(--color-dark);
  /* 30% darker than secondary */
  --color-secondary-light: var(--color-light);
  /* 30% lighter than secondary */

  /* Neutral colors */
  --color-background: var(--color-dark);
  --color-text: var(--color-light);
  --color-text-light: var(--color-light);
  --color-title: var(--color-dark);

  /* Accent colors */
  --color-accent: #ea4335;
  --color-accent-dark: #c5221f;
  --color-accent-light: #ff6b6b;

  /* UI colors */
  --color-border: #dadce0;
  --color-shadow: rgba(0, 0, 0, 0.1);

  /* Header colors */
  --color-header-background: var(--color-background);
  --color-header-text: #f8f9fa;

  /* Page colors */
  --color-page-background: var(--color-background);
  --color-page-text: var(--color-text);

  /* Footer colors */
  --color-footer-background: var(--color-background);
  --color-footer-text: var(--color-light);

  /* Typography colors */
  --color-link: #0d6efd;
  --color-link-hover: #0a58ca;
  --color-body-text: #212529;

  --color-label: var(--color-primary-light);

  --grid-gap: 2rem;
  --grid-row-gap: var(--grid-gap);
  --grid-column-gap: var(--grid-gap);
  --grid-gap-sm: .5rem;

  --border-radius: .2rem;

  --size-font-text: 1.2rem;
  --size-font-h1: 1.8rem;
  --size-font-h2: calc(var(--size-font-h1) - 0.2rem);
  --size-font-h3: calc(var(--size-font-h2) - 0.2rem);
  --size-font-h4: calc(var(--size-font-h3) - 0.2rem);
  --size-font-h5: calc(var(--size-font-h2) - 0.2rem);
  --size-font-h6: calc(var(--size-font-h3) - 0.2rem);

  --font-family-heading: "Manufaktur";
  --font-family-text: "Industrial", Arial, Helvetica, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue';
}

[data-hepta-theme="light"] {
  --color-text: var(--color-dark);
  --color-background: var(--color-light);
  --color-title: var(--color-light);
}

@media (max-width: 768px) {
  :root {
    --grid-gap: .5rem;
  }
}