@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

/* =========================
   CSS Custom Properties
   ========================= */
:root {
  /* Colors */
  --bg-primary: #ffffff;
  --bg-secondary: #eeeeee;
  --text-primary: #666666;
  --text-secondary: #999999;
  --border-color: #dee2e6;
  --hover-shadow: #eeeeee;
  --link-hover: #0090d4;
  
  /* Typography Scale */
  --font-family: "Roboto", system-ui, -apple-system, sans-serif;
  --font-size-h1: 2.5rem;
  --font-size-absatz: 1.25rem;
  --font-size-small: 1rem;
  
  /* Icon Sizes */
  --icon-logo: 40px;
  --icon-big: 100px;
  --icon-middle: 32px;
  --icon-small: 24px;
  --numeration-size: 24px;
}

/* =========================
   Dark Mode
   ========================= */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --text-primary: #e0e0e0;
    --text-secondary: #a0a0a0;
    --border-color: #404040;
    --hover-shadow: #333333;
    --link-hover: #4db8ff;
  }
}

/* =========================
   Base Styles
   ========================= */
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-family);
}

.border {
  border-color: var(--border-color) !important;
}

/* =========================
   Background Utilities
   ========================= */
.background1 {
  background-color: var(--bg-primary);
}

.background2 {
  background-color: var(--bg-secondary);
}

/* =========================
   Typography
   ========================= */
.h1 {
  font-family: var(--font-family);
  font-size: var(--font-size-h1);
  color: var(--text-primary);
}

.absatz {
  font-family: var(--font-family);
  font-size: var(--font-size-absatz);
  color: var(--text-primary);
}

.small,
.numeration {
  font-family: var(--font-family);
  font-size: var(--font-size-small);
  color: var(--text-secondary);
}

/* =========================
   Links
   ========================= */
.link {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  font-family: inherit;
  transition: all 0.2s ease-in-out;
}

.link:hover {
  box-shadow: inset 0 0 0 5px var(--hover-shadow);
  color: var(--link-hover);
}

.link:hover .link-name {
  color: var(--link-hover);
}

.absatz .link:hover {
  box-shadow: none;
}

/* =========================
   Icons & Images
   ========================= */
.logo {
  width: var(--icon-logo);
  height: var(--icon-logo);

  display: flex;
  flex-shrink: 0;
}

.icon-big {
  width: var(--icon-big);
  height: var(--icon-big);

  display: flex;
  flex-shrink: 0;
}

.icon-middle {
  width: var(--icon-middle);
  height: var(--icon-middle);

  display: flex;
  flex-shrink: 0;
}

.icon-small {
  width: var(--icon-small);
  height: var(--icon-small);

  display: var(--icon-small);
  flex-shrink: 0;
}

.numeration {
  width: var(--numeration-size);
  height: var(--numeration-size);

  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

/* =========================
   Responsive Breakpoints
   ========================= */

/* XXL devices (≤1399.98px) */
@media (max-width: 1399.98px) {
  :root {
    --font-size-h1: 2.1rem;
    --font-size-absatz: 1rem;
    --font-size-small: 0.85rem;
    --icon-logo: 34px;
    --icon-big: 85px;
    --icon-middle: 26px;
    --icon-small: 19px;
    --numeration-size: 19px;
  }
}

/* XL devices (≤1199.98px) */
@media (max-width: 1199.98px) {
  :root {
    --font-size-h1: 1.75rem;
    --font-size-absatz: 0.85rem;
    --font-size-small: 0.7rem;
    --icon-logo: 28px;
    --icon-big: 70px;
    --icon-middle: 21px;
    --icon-small: 15px;
    --numeration-size: 19px;
  }
}

/* LG devices (≤991.98px) */
@media (max-width: 991.98px) {
  :root {
    --font-size-h1: 1.4rem;
    --font-size-absatz: 0.7rem;
    --font-size-small: 0.6rem;
    --icon-logo: 24px;
    --icon-big: 56px;
    --icon-middle: 18px;
    --icon-small: 12px;
    --numeration-size: 19px;
  }
}