/* ============================
   ✅ Utility Classes System
   - Spacing
   - Typography
   - Flexbox & Grid
   - Display & Visibility
   ============================ */

/* ========== 🌟 SPACING SYSTEM ========== */
:root {
  --space-xxs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 40px;
  --space-4xl: 48px;
  --space-5xl: 64px;
}

/* Margin */
.margin-xxs {
  margin: var(--space-xxs);
}
.margin-xs {
  margin: var(--space-xs);
}
.margin-sm {
  margin: var(--space-sm);
}
.margin-md {
  margin: var(--space-md);
}
.margin-lg {
  margin: var(--space-lg);
}
.margin-xl {
  margin: var(--space-xl);
}
.margin-2xl {
  margin: var(--space-2xl);
}
.margin-3xl {
  margin: var(--space-3xl);
}
.margin-4xl {
  margin: var(--space-4xl);
}
.margin-5xl {
  margin: var(--space-5xl);
}

/* Margin Top */
.margin-top-xxs {
  margin-top: var(--space-xxs);
}
.margin-top-xs {
  margin-top: var(--space-xs);
}
.margin-top-sm {
  margin-top: var(--space-sm);
}
.margin-top-md {
  margin-top: var(--space-md);
}
.margin-top-lg {
  margin-top: var(--space-lg);
}
.margin-top-xl {
  margin-top: var(--space-xl);
}
.margin-top-2xl {
  margin-top: var(--space-2xl);
}
.margin-top-3xl {
  margin-top: var(--space-3xl);
}
.margin-top-4xl {
  margin-top: var(--space-4xl);
}
.margin-top-5xl {
  margin-top: var(--space-5xl);
}

/* Margin Bottom */
.margin-bottom-xxs {
  margin-bottom: var(--space-xxs);
}
.margin-bottom-xs {
  margin-bottom: var(--space-xs);
}
.margin-bottom-sm {
  margin-bottom: var(--space-sm);
}
.margin-bottom-md {
  margin-bottom: var(--space-md);
}
.margin-bottom-lg {
  margin-bottom: var(--space-lg);
}
.margin-bottom-xl {
  margin-bottom: var(--space-xl);
}
.margin-bottom-2xl {
  margin-bottom: var(--space-2xl);
}
.margin-bottom-3xl {
  margin-bottom: var(--space-3xl);
}
.margin-bottom-4xl {
  margin-bottom: var(--space-4xl);
}
.margin-bottom-5xl {
  margin-bottom: var(--space-5xl);
}

/* Margin Left */
.margin-left-xxs {
  margin-left: var(--space-xxs);
}
.margin-left-xs {
  margin-left: var(--space-xs);
}
.margin-left-sm {
  margin-left: var(--space-sm);
}
.margin-left-md {
  margin-left: var(--space-md);
}
.margin-left-lg {
  margin-left: var(--space-lg);
}
.margin-left-xl {
  margin-left: var(--space-xl);
}
.margin-left-2xl {
  margin-left: var(--space-2xl);
}
.margin-left-3xl {
  margin-left: var(--space-3xl);
}
.margin-left-4xl {
  margin-left: var(--space-4xl);
}
.margin-left-5xl {
  margin-left: var(--space-5xl);
}

/* Margin Right */
.margin-right-xxs {
  margin-right: var(--space-xxs);
}
.margin-right-xs {
  margin-right: var(--space-xs);
}
.margin-right-sm {
  margin-right: var(--space-sm);
}
.margin-right-md {
  margin-right: var(--space-md);
}
.margin-right-lg {
  margin-right: var(--space-lg);
}
.margin-right-xl {
  margin-right: var(--space-xl);
}
.margin-right-2xl {
  margin-right: var(--space-2xl);
}
.margin-right-3xl {
  margin-right: var(--space-3xl);
}
.margin-right-4xl {
  margin-right: var(--space-4xl);
}
.margin-right-5xl {
  margin-right: var(--space-5xl);
}

/* Padding */
.padding-xxs {
  padding: var(--space-xxs);
}
.padding-xs {
  padding: var(--space-xs);
}
.padding-sm {
  padding: var(--space-sm);
}
.padding-md {
  padding: var(--space-md);
}
.padding-lg {
  padding: var(--space-lg);
}
.padding-xl {
  padding: var(--space-xl);
}
.padding-2xl {
  padding: var(--space-2xl);
}
.padding-3xl {
  padding: var(--space-3xl);
}
.padding-4xl {
  padding: var(--space-4xl);
}
.padding-5xl {
  padding: var(--space-5xl);
}

/* Padding Top */
.padding-top-xxs {
  padding-top: var(--space-xxs);
}
.padding-top-xs {
  padding-top: var(--space-xs);
}
.padding-top-sm {
  padding-top: var(--space-sm);
}
.padding-top-md {
  padding-top: var(--space-md);
}
.padding-top-lg {
  padding-top: var(--space-lg);
}
.padding-top-xl {
  padding-top: var(--space-xl);
}
.padding-top-2xl {
  padding-top: var(--space-2xl);
}
.padding-top-3xl {
  padding-top: var(--space-3xl);
}
.padding-top-4xl {
  padding-top: var(--space-4xl);
}
.padding-top-5xl {
  padding-top: var(--space-5xl);
}

/* Padding Bottom */
.padding-bottom-xxs {
  padding-bottom: var(--space-xxs);
}
.padding-bottom-xs {
  padding-bottom: var(--space-xs);
}
.padding-bottom-sm {
  padding-bottom: var(--space-sm);
}
.padding-bottom-md {
  padding-bottom: var(--space-md);
}
.padding-bottom-lg {
  padding-bottom: var(--space-lg);
}
.padding-bottom-xl {
  padding-bottom: var(--space-xl);
}
.padding-bottom-2xl {
  padding-bottom: var(--space-2xl);
}
.padding-bottom-3xl {
  padding-bottom: var(--space-3xl);
}
.padding-bottom-4xl {
  padding-bottom: var(--space-4xl);
}
.padding-bottom-5xl {
  padding-bottom: var(--space-5xl);
}

/* Padding Left */
.padding-left-xxs {
  padding-left: var(--space-xxs);
}
.padding-left-xs {
  padding-left: var(--space-xs);
}
.padding-left-sm {
  padding-left: var(--space-sm);
}
.padding-left-md {
  padding-left: var(--space-md);
}
.padding-left-lg {
  padding-left: var(--space-lg);
}
.padding-left-xl {
  padding-left: var(--space-xl);
}
.padding-left-2xl {
  padding-left: var(--space-2xl);
}
.padding-left-3xl {
  padding-left: var(--space-3xl);
}
.padding-left-4xl {
  padding-left: var(--space-4xl);
}
.padding-left-5xl {
  padding-left: var(--space-5xl);
}

/* Padding Right */
.padding-right-xxs {
  padding-right: var(--space-xxs);
}
.padding-right-xs {
  padding-right: var(--space-xs);
}
.padding-right-sm {
  padding-right: var(--space-sm);
}
.padding-right-md {
  padding-right: var(--space-md);
}
.padding-right-lg {
  padding-right: var(--space-lg);
}
.padding-right-xl {
  padding-right: var(--space-xl);
}
.padding-right-2xl {
  padding-right: var(--space-2xl);
}
.padding-right-3xl {
  padding-right: var(--space-3xl);
}
.padding-right-4xl {
  padding-right: var(--space-4xl);
}
.padding-right-5xl {
  padding-right: var(--space-5xl);
}

/* Gap (for flex/grid) */
.gap-xs {
  gap: var(--space-xs);
}
.gap-sm {
  gap: var(--space-sm);
}
.gap-md {
  gap: var(--space-md);
}
.gap-lg {
  gap: var(--space-lg);
}
.gap-xl {
  gap: var(--space-xl);
}
.gap-2xl {
  gap: var(--space-2xl);
}
.gap-3xl {
  gap: var(--space-3xl);
}

/* ========== ✨ TYPOGRAPHY SYSTEM ========== */
:root {
  --fs-xs: 0.75rem; /* 12px */
  --fs-sm: 0.875rem; /* 14px */
  --fs-md: 1rem; /* 16px */
  --fs-lg: 1.125rem; /* 18px */
  --fs-xl: 1.25rem; /* 20px */
  --fs-2xl: 1.5rem; /* 24px */
}

h1 {
  font-size: var(--fs-2xl);
  font-weight: 700;
}
h2 {
  font-size: var(--fs-xl);
  font-weight: 600;
}
h3 {
  font-size: var(--fs-lg);
  font-weight: 500;
}
p {
  font-size: var(--fs-md);
  line-height: 1.5;
}

.text-xs {
  font-size: var(--fs-xs);
}
.text-sm {
  font-size: var(--fs-sm);
}
.text-md {
  font-size: var(--fs-md);
}
.text-lg {
  font-size: var(--fs-lg);
}
.text-xl {
  font-size: var(--fs-xl);
}
.text-2xl {
  font-size: var(--fs-2xl);
}

.text-bold {
  font-weight: 700;
}
.text-semibold {
  font-weight: 600;
}
.text-regular {
  font-weight: 400;
}
.text-light {
  font-weight: 300;
}

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

/* ========== 📏 FLEXBOX & GRID ========== */
.flex {
  display: flex;
}
.flex-col {
  display: flex;
  flex-direction: column;
}
.flex-row {
  display: flex;
  flex-direction: row;
}
.flex-wrap {
  flex-wrap: wrap;
}
.justify-start {
  justify-content: flex-start;
}
.justify-center {
  justify-content: center;
}
.justify-end {
  justify-content: flex-end;
}
.justify-between {
  justify-content: space-between;
}
.align-start {
  align-items: flex-start;
}
.align-center {
  align-items: center;
}
.align-end {
  align-items: flex-end;
}

.grid {
  display: grid;
}
.grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}
.grid-gap-sm {
  gap: var(--space-sm);
}
.grid-gap-md {
  gap: var(--space-md);
}
.grid-gap-lg {
  gap: var(--space-lg);
}

/* ========== 🖥️ DISPLAY & VISIBILITY ========== */
/* .hidden {
  display: none;
} */
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.grid {
  display: grid;
}

/* ========== 📏 MAX-WIDTH SYSTEM (using rem) ========== */
:root {
  /* Assuming a container max-width of 48rem */
  --max-width-xs: 9.6rem; /* ~20% of 48rem */
  --max-width-sm: 12rem; /* ~25% of 48rem */
  --max-width-md: 16rem; /* ~33.33% of 48rem */
  --max-width-lg: 24rem; /* 50% of 48rem */
  --max-width-xl: 36rem; /* 75% of 48rem */
  --max-width-2xl: 43.2rem; /* ~90% of 48rem */
  --max-width-3xl: 48rem; /* 100% of 48rem */
}

.max-width-xs {
  max-width: var(--max-width-xs);
}
.max-width-sm {
  max-width: var(--max-width-sm);
}
.max-width-md {
  max-width: var(--max-width-md);
}
.max-width-lg {
  max-width: var(--max-width-lg);
}
.max-width-xl {
  max-width: var(--max-width-xl);
}
.max-width-2xl {
  max-width: var(--max-width-2xl);
}
.max-width-3xl {
  max-width: var(--max-width-3xl);
}

/* ========== 📏 WIDTH SYSTEM (using percentages) ========== */
:root {
  --perc-width-xs: 20%;
  --perc-width-sm: 25%;
  --perc-width-md: 33.33%;
  --perc-width-lg: 50%;
  --perc-width-xl: 75%;
  --perc-width-2xl: 90%;
  --perc-width-3xl: 100%;
}

.width-xs {
  width: var(--perc-width-xs);
}
.width-sm {
  width: var(--perc-width-sm);
}
.width-md {
  width: var(--perc-width-md);
}
.width-lg {
  width: var(--perc-width-lg);
}
.width-xl {
  width: var(--perc-width-xl);
}
.width-2xl {
  width: var(--perc-width-2xl);
}
.width-3xl {
  width: var(--perc-width-3xl);
}

/* ========== Button Components - Primary and Secondary Buttons ========== */
:root {
  /* Color Variables */
  --color-primary: #000;
  --color-primary-hover: rgba(255, 255, 255, 0.5);
  --color-secondary: transparent;
  --color-secondary-hover: rgba(255, 255, 255, 0.5);
  --color-white: #fff;
  --color-black: #000;

  /* Standard Button Variables */
  --btn-padding: 0.75rem 1.5rem;
  --btn-font-size: 1rem;
  --btn-border: 1px solid #000;
  --btn-border-radius: 8px;
  --btn-transition: background-color 0.3s ease, transform 0.3s ease;

  /* Pill Button (Subtle, Smaller) */
  --pill-btn-padding: 0 1rem;
  --pill-btn-border-radius: 50px;
  --pill-btn-bg: transparent;
  --pill-btn-border: 1px solid #000;
  --pill-btn-border-radius: 8px;
  --pill-btn-hover-bg: #000;
}

.btn {
  display: inline-block;
  font-size: var(--btn-font-size);
  padding: var(--btn-padding);
  border: var(--btn-border);
  border-radius: var(--btn-border-radius);
  cursor: pointer;
  text-decoration: none;
  transition: var(--btn-transition);
  text-align: center;
  min-width: var(--max-width-sm);
  max-width: var(--max-width-3xl);
}

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

.btn-primary:hover {
  background-color: var(--color-primary-hover);
  color: var(--color-black);
}

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

.btn-secondary:hover {
  background-color: var(--color-secondary-hover);
  backdrop-filter: blur(10px);
}

/* Pill Button Variant */
.btn-pill {
  padding: var(--pill-btn-padding);
  background-color: var(--pill-btn-bg);
  color: var(--pill-btn-color);
  border: var(--pill-btn-border);
  border-radius: var(--pill-btn-border-radius);
  transition: background-color 0.3s ease;
  text-decoration: none;
}
.btn-pill:hover {
  background-color: var(--pill-btn-hover-bg);
  color: var(--color-white);
}

/* Styled Link for comparison */
.link {
  color: var(--color-primary);
  transition: color 0.3s ease;
  text-decoration: underline;
}

/* Focus states for accessibility */
.btn:focus {
  outline: 2px solid #333;
  outline-offset: 2px;
}

@media (min-width: 768px) {
  .hidden-desktop {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .btn {
    width: var(--perc-width-3xl);
    min-width: 0;
  }
}