:root,
[data-theme="light"] {
  --main-font: 'main_font', system-ui, sans-serif;

  --page-bg: url('/assets/images/home/home_bg.webp');
  --bg-color: rgb(43, 42, 42);

  --bold-bg: #004dac;
  --color: rgb(230, 230, 230);
  --color-sub: rgb(191, 191, 255);
  --color-alt: rgb(255, 255, 255);
  --border-color: rgb(170, 170, 170);

  --neutral: rgb(63, 112, 189);
  --error: rgb(218, 59, 51);
  --warn: rgb(255, 189, 48);
  --success: rgb(66, 153, 49);
  --cancel: rgb(116, 116, 121);

  /* == Layout Variables == */
  --padding-xl: 40px;
  --padding-lg: calc(var(--padding-xl, 20px) / 2);
  --padding-md: calc(var(--padding-xl, 10px) / 4);
  --padding-sm: calc(var(--padding-xl, 5px) / 8);

  --gap-md: 0.7rem;

  --radius-xl: 40px;
  --radius-lg: calc(var(--radius-xl, 20px) / 2);
  --radius-md: calc(var(--radius-xl, 10px) / 4);
  --radius-sm: calc(var(--radius-xl, 5px) / 8);


  /* == Specific Stylings == */
  /* list */
  --list-spacing: 0.4rem;
  /* anchor links */
  --anchor-color: white;
  /* buttons */
  --basic-btn-bg: var(--bg-color);
  --basic-btn-color: var(--color);
  --clear-btn-hover-bg: rgb(75, 75, 75);
  --clear-btn-hover-color: white;
  /* headers */
  --main-header-bg: rgb(7, 7, 7);
  --main-header-color: var(--color);
  --header-bg: var(--main-header-bg);
  --header-color: var(--color);
  /* cards */
  --product-card-bg: rgb(72, 72, 72);
  --product-card-color: rgb(245, 245, 245);
  /* context-menu */
  --context-btn-hover: rgb(255, 255, 255);
  /* square-button */
  --sq-btn-size: 40px;
  /* disabled elements */
  --disabled-bg: rgb(137, 137, 137);
  --disabled-color: rgb(91, 91, 91);
  /* sidebar */
  --sidebar-bg: rgb(0, 0, 0);
  --sidebar-btn-hover: rgb(255, 255, 255);
  /* spoiler-tag */
  --spoiler-color: rgb(120, 120, 120);
  /* progress-bar */
  --progress-track: #513a5e;
  --progress-color1: rgb(100, 170, 255);
  --progress-color2: rgb(208, 113, 255);
  /* tags */
  --tags-bg: rgb(109, 47, 111);
  /* wrapper */
  --wrapper-max-width: 1300px;
  --item-max-width: 400px;
  --item-height: 300px;
  /* carousel-track */
  --carousel-item-height: 150px;
  --carousel-item-width: 200px;
  /* Form Elements */
  --form-accent-color: rgb(123, 0, 255);
  --label-color: rgb(187, 187, 187);
  --input-bg: #f2f2f7;
  --input-color: black;
  /* flex-split */
  --flex-max-width: clamp(300px, 40vw, 500px);
  /* status-box */
  --statusbox-tip: rgb(17, 129, 28);
  --statusbox-caution: rgb(173, 99, 9);
  --statusbox-info: rgb(0, 91, 202);
  --statusbox-warning: rgb(192, 4, 4);
}

@font-face {
  font-family: 'main_font';
  src: url('/assets/fonts/roboto/Roboto-Light.woff2') format('woff2'),
    url('/assets/fonts/roboto/Roboto-Light.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: 'main_font';
  src: url('/assets/fonts/roboto/Roboto-Regular.woff2') format('woff2'),
    url('/assets/fonts/roboto/Roboto-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: bold;
  font-display: swap;
}

@font-face {
  font-family: 'main_font';
  src: url('/assets/fonts/roboto/Roboto-Italic.woff2') format('woff2'),
    url('/assets/fonts/roboto/Roboto-Italic.ttf') format('truetype');
  font-style: italic;
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: 'main_font';
  src: url('/assets/fonts/roboto/Roboto-BoldItalic.ttf') format('woff2'),
    url('/assets/fonts/roboto/Roboto-BoldItalic.ttf') format('truetype');
  font-style: italic;
  font-weight: bold;
  font-display: swap;
}