:root {
  /* Base Sizes */
  --max-screen-size: 425px;
  --max-question-size: 380px;
  --default-button-size: 90%;

  /* Base Colors */
  --primary-color: #3c9300;
  --secondary-color: #ff8933;

  /* Base Space */
  --screen-spacing: 0.5rem;

  /* Utility Colors */
  --color-red: #ff0000;
  --color-lightred: #f05252;
  --color-lightgreen: #6ccb6c;
  --color-lightergreen: #92da41;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-grey: #808080;
  --color-dark-blue: #24234c;
  --color-steel-gray: #6b7280;
  --color-lighter-gray: #f5f5f5;
  --color-link: #0000ff;
  --question-bg-color: #f5f5f5;
  --question-bg-color-active: #cfe6da;

  /* Utility Sizes */
  --font-size-2xs: 0.625rem; /* extra small (10px) */
  --font-size-xs: 0.75rem; /* extra small (12px) */
  --font-size-xsm: 0.813rem; /* extra small (13px) */
  --font-size-sm: 0.875rem; /* small (14px) */
  --font-size-base: 1rem; /* base / normal (16px) */
  --font-size-lg: 1.125rem; /* large (18px) */
  --font-size-xl: 1.25rem; /* extra large (20px) */
  --font-size-2-5xl: 1.375rem; /* extra large (22px) */
  --font-size-2-7xl: 1.5rem; /* extra large (24px) */
  --font-size-2xl: 1.625rem; /* double extra large (26px) */
  --font-size-3xl: 1.875rem; /* triple extra large (30px) */
  --font-size-4xl: 2.25rem; /* huge (36px) */
  --font-size-4-5xl: 2.5rem; /* huge (40px) */
  --font-size-5xl: 3rem; /* massive (48px) */

  /* Utility Spacing */
  --space-2xs: 0.25rem; /* 4px */
  --space-xs: 0.5rem; /* 8px */
  --space-sm: 0.75rem; /* 12px */
  --space-md: 1rem; /* 16px → base margin */
  --space-lg: 1.375rem; /* 22px */
  --space-xl: 1.5rem; /* 24px */
  --space-2xl: 2rem; /* 32px */
  --space-3xl: 3rem; /* 48px */
  --space-4xl: 3.5rem; /* 56px */
}

/* Base Styles */
body {
  font-family: "Noto Sans";
}

/* Utility Styles */

.width-container {
  width: 100%;
  max-width: var(--max-screen-size);
  margin-inline: auto;
  padding-top: 80px;
}

.screen-spacing {
  padding-inline: var(--screen-spacing);
}

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

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

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

.text-color-primary {
  color: var(--primary-color);
}

.text-color-secondary {
  color: var(--secondary-color);
}

.text-color-lightgreen {
  color: var(--color-lightgreen);
}

.text-color-lightergreen {
  color: var(--color-lightergreen);
}

.text-color-lightred {
  color: var(--color-lightred);
}

.text-color-red {
  color: var(--color-red);
}

.text-color-black {
  color: var(--color-black);
}

.text-color-white {
  color: var(--color-white);
}

.text-color-grey {
  color: var(--color-grey);
}

.text-color-dark-blue {
  color: var(--color-dark-blue);
}

.text-color-steel-gray {
  color: var(--color-steel-gray);
}

.text-color-lighter-gray {
  color: var(--color-lighter-gray);
}

.text-color-link {
  color: var(--color-link);
}

.text-2xs {
  font-size: var(--font-size-2xs);
}

.text-xsm {
  font-size: var(--font-size-xsm);
}

.text-xs {
  font-size: var(--font-size-xs);
}

.text-sm {
  font-size: var(--font-size-sm);
}

.text-base {
  font-size: var(--font-size-base);
}

.text-lg {
  font-size: var(--font-size-lg);
}

.text-xl {
  font-size: var(--font-size-xl);
}

.text-2-7xl {
  font-size: var(--font-size-2-7xl);
}

.text-2-5xl {
  font-size: var(--font-size-2-5xl);
}

.text-2xl {
  font-size: var(--font-size-2xl);
}

.text-3xl {
  font-size: var(--font-size-3xl);
}

.text-4xl {
  font-size: var(--font-size-4xl);
}

.text-4-5xl {
  font-size: var(--font-size-4-5xl);
}

.text-5xl {
  font-size: var(--font-size-5xl);
}

.text-400 {
  font-weight: 400;
}

.text-500 {
  font-weight: 500;
}

.text-600 {
  font-weight: 600;
}

.text-700 {
  font-weight: 700;
}

.text-800 {
  font-weight: 800;
}

.h2_heading {
  font-size: var(--font-size-2xl);
  line-height: 1;
}

.h4_heading {
  font-size: var(--font-size-base);
  line-height: 1.4;
}

.h5_heading {
  font-size: var(--font-size-sm);
}

.p_description {
  font-size: var(--font-size-base);
  line-height: 1.4;
}

.text-center {
  text-align: center;
}

/* Margin Top */
.mt-2xs {
  margin-top: var(--space-2xs);
}

.mt-xs {
  margin-top: var(--space-xs);
}

.mt-sm {
  margin-top: var(--space-sm);
}

.mt-md {
  margin-top: var(--space-md);
}

.mt-lg {
  margin-top: var(--space-lg);
}

.mt-xl {
  margin-top: var(--space-xl);
}

.mt-2xl {
  margin-top: var(--space-2xl);
}

.mt-3xl {
  margin-top: var(--space-3xl);
}

.mt-4xl {
  margin-top: var(--space-4xl);
}

/* Margin Bottom */

.mb-2xs {
  margin-bottom: var(--space-2xs);
}

.mb-xs {
  margin-bottom: var(--space-xs);
}

.mb-sm {
  margin-bottom: var(--space-sm);
}

.mb-md {
  margin-bottom: var(--space-md);
}

.mb-lg {
  margin-bottom: var(--space-lg);
}

.mb-xl {
  margin-bottom: var(--space-xl);
}

.mb-2xl {
  margin-bottom: var(--space-2xl);
}

.mb-3xl {
  margin-bottom: var(--space-3xl);
}

.mb-4xl {
  margin-bottom: var(--space-4xl);
}

.img-default {
  width: 100%;
  height: 100%;
  max-height: 340px;
  margin-block: var(--space-4xl);
}

.img-full {
  width: 100%;
  height: 100%;
}