:root {
  /* Flex container */
  --flex-direction-row: row;
  --flex-direction-col: column;
  --flex-wrap-nowrap: nowrap;
  --flex-wrap-wrap: wrap;

  /* Alinhamento */
  --justify-start: flex-start;
  --justify-end: flex-end;
  --justify-center: center;
  --justify-between: space-between;
  --justify-around: space-around;
  --justify-evenly: space-evenly;

  --items-start: flex-start;
  --items-end: flex-end;
  --items-center: center;
  --items-baseline: baseline;
  --items-stretch: stretch;

  --content-start: flex-start;
  --content-end: flex-end;
  --content-center: center;
  --content-between: space-between;
  --content-around: space-around;
  --content-stretch: stretch;

  --left: left;
  --right: right;
  --center: center;
  --justify: justify;

  /* Espaçamentos base para gap */
  --spacing-xxs: 0.125rem; /* 2px */
  --spacing-xs: 0.25rem;   /* 4px */
  --spacing-sm: 0.375rem;  /* 6px */
  --spacing-md: 0.5rem;    /* 8px */
  --spacing-ml: 0.75rem;   /* 12px */
  --spacing-lg: 1rem;      /* 16px */
  --spacing-xl: 1.5rem;    /* 24px */
  --spacing-xxl: 2rem;     /* 32px */

  /* Gap */
  --gap-xxs: var(--spacing-xxs);
  --gap-xs: var(--spacing-xs);
  --gap-sm: var(--spacing-sm);
  --gap-md: var(--spacing-md);
  --gap-ml: var(--spacing-ml);
  --gap-lg: var(--spacing-lg);
  --gap-xl: var(--spacing-xl);
  --gap-xxl: var(--spacing-xxl);
}

/* Classes utilitárias de flexbox */
.flex { display: flex; }
.flex-inline { display: inline-flex; }

/* Direção */
.flex-row { flex-direction: var(--flex-direction-row); }
.flex-col { flex-direction: var(--flex-direction-col); }

/* Wrap */
.flex-nowrap { flex-wrap: var(--flex-wrap-nowrap); }
.flex-wrap { flex-wrap: var(--flex-wrap-wrap); }

/* Justify Content */
.justify-start { justify-content: var(--justify-start); }
.justify-end { justify-content: var(--justify-end); }
.justify-center { justify-content: var(--justify-center); }
.justify-between { justify-content: var(--justify-between); }
.justify-around { justify-content: var(--justify-around); }
.justify-evenly { justify-content: var(--justify-evenly); }

/* Align Items */
.items-start { align-items: var(--items-start); }
.items-end { align-items: var(--items-end); }
.items-center { align-items: var(--items-center); }
.items-baseline { align-items: var(--items-baseline); }
.items-stretch { align-items: var(--items-stretch); }

/* Align Content */
.content-start { align-content: var(--content-start); }
.content-end { align-content: var(--content-end); }
.content-center { align-content: var(--content-center); }
.content-between { align-content: var(--content-between); }
.content-around { align-content: var(--content-around); }
.content-stretch { align-content: var(--content-stretch); }

/* Align Self */
.self-start { align-self: var(--items-start); }
.self-end { align-self: var(--items-end); }
.self-center { align-self: var(--items-center); }
.self-stretch { align-self: var(--items-stretch); }
.self-baseline { align-self: var(--items-baseline); }

/* Text Align */
.text-left { text-align: var(--left); }
.text-right { text-align: var(--right); }
.text-center { text-align: var(--center); }
.text-justify { text-align: var(--justify); }

/* Gap */
.gap-xs { gap: var(--gap-xs); }
.gap-sm { gap: var(--gap-sm); }
.gap-md { gap: var(--gap-md); }
.gap-ml { gap: var(--gap-ml); }
.gap-lg { gap: var(--gap-lg); }
.gap-xl { gap: var(--gap-xl); }
.gap-xxl { gap: var(--gap-xxl); }

/* Flex Grow/Shrink */
.flex-1 { flex: 1; }
.flex-auto { flex: auto; }
.flex-initial { flex: initial; }
.flex-none { flex: none; }

/* Order */
.order-first { order: -1; }
.order-last { order: 9999; }
.order-none { order: 0; }