/* =========================================================
   UTILITIES — HELPER CLASSES
   =========================================================

   Classes auxiliares pequenas, previsíveis e
   reutilizáveis em todo o projecto.

   Depende de:
   - tokens.css

   Este ficheiro contém:
   - Display helpers
   - Flex helpers
   - Alignment helpers
   - Spacing helpers
   - Text helpers
   - Visibility helpers
   - Width helpers
   - Height helpers
   - Position helpers
   - Accessibility helpers
   - Outras classes utilitárias simples

   Regra:
   Uma utility deve executar uma função pequena
   e específica.

   Não colocar aqui:
   - Componentes completos
   - Layouts complexos
   - Estilos específicos de páginas
   - Overrides
   ========================================================= */

/*
========================================================
01. DISPLAY
========================================================
*/

.d-none {
  display: none !important;
}

.d-block {
  display: block !important;
}

.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-flex {
  display: flex !important;
}

.d-inline-flex {
  display: inline-flex !important;
}

.d-grid {
  display: grid !important;
}

/*
========================================================
02. FLEX
========================================================
*/

.flex-row {
  flex-direction: row !important;
}

.flex-column {
  flex-direction: column !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-nowrap {
  flex-wrap: nowrap !important;
}

.flex-1 {
  flex: 1 1 0% !important;
}

.flex-auto {
  flex: 1 1 auto !important;
}

.flex-none {
  flex: none !important;
}

/*
========================================================
03. ALIGNMENT
========================================================
*/

.items-start {
  align-items: flex-start !important;
}

.items-center {
  align-items: center !important;
}

.items-end {
  align-items: flex-end !important;
}

.items-stretch {
  align-items: stretch !important;
}

.justify-start {
  justify-content: flex-start !important;
}

.justify-center {
  justify-content: center !important;
}

.justify-end {
  justify-content: flex-end !important;
}

.justify-between {
  justify-content: space-between !important;
}

.justify-around {
  justify-content: space-around !important;
}

.justify-evenly {
  justify-content: space-evenly !important;
}

/*
========================================================
04. GAP
========================================================
*/

.gap-0 {
  gap: 0 !important;
}

.gap-xxs {
  gap: var(--space-xxs) !important;
}

.gap-xs {
  gap: var(--space-xs) !important;
}

.gap-sm {
  gap: var(--space-sm) !important;
}

.gap-md {
  gap: var(--space-md) !important;
}

.gap-lg {
  gap: var(--space-lg) !important;
}

.gap-xl {
  gap: var(--space-xl) !important;
}

.gap-2xl {
  gap: var(--space-2xl) !important;
}

/*
========================================================
05. MARGIN
========================================================
*/

.m-0 {
  margin: 0 !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.ms-0 {
  margin-inline-start: 0 !important;
}

.me-0 {
  margin-inline-end: 0 !important;
}

.mx-auto {
  margin-inline: auto !important;
}

/*
--------------------------------------------------------
MARGIN TOP
--------------------------------------------------------
*/

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

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

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

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

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

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

/*
--------------------------------------------------------
MARGIN BOTTOM
--------------------------------------------------------
*/

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

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

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

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

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

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

/*
========================================================
06. PADDING
========================================================
*/

.p-0 {
  padding: 0 !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.ps-0 {
  padding-inline-start: 0 !important;
}

.pe-0 {
  padding-inline-end: 0 !important;
}

/*
--------------------------------------------------------
PADDING BLOCK
--------------------------------------------------------
*/

.py-xs {
  padding-block: var(--space-xs) !important;
}

.py-sm {
  padding-block: var(--space-sm) !important;
}

.py-md {
  padding-block: var(--space-md) !important;
}

.py-lg {
  padding-block: var(--space-lg) !important;
}

.py-xl {
  padding-block: var(--space-xl) !important;
}

/*
--------------------------------------------------------
PADDING INLINE
--------------------------------------------------------
*/

.px-xs {
  padding-inline: var(--space-xs) !important;
}

.px-sm {
  padding-inline: var(--space-sm) !important;
}

.px-md {
  padding-inline: var(--space-md) !important;
}

.px-lg {
  padding-inline: var(--space-lg) !important;
}

.px-xl {
  padding-inline: var(--space-xl) !important;
}

/*
========================================================
07. WIDTH
========================================================
*/

.w-auto {
  width: auto !important;
}

.w-full {
  width: 100% !important;
}

.max-w-full {
  max-width: 100% !important;
}

/*
========================================================
08. HEIGHT
========================================================
*/

.h-auto {
  height: auto !important;
}

.h-full {
  height: 100% !important;
}

.min-h-screen {
  min-height: 100vh !important;
}

/*
========================================================
09. POSITION
========================================================
*/

.position-static {
  position: static !important;
}

.position-relative {
  position: relative !important;
}

.position-absolute {
  position: absolute !important;
}

.position-fixed {
  position: fixed !important;
}

.position-sticky {
  position: sticky !important;
}

/*
========================================================
10. TEXT ALIGNMENT
========================================================
*/

.text-left {
  text-align: left !important;
}

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

.text-right {
  text-align: right !important;
}

/*
========================================================
11. TEXT TRANSFORM
========================================================
*/

.text-uppercase {
  text-transform: uppercase !important;
}

.text-lowercase {
  text-transform: lowercase !important;
}

.text-capitalize {
  text-transform: capitalize !important;
}

.text-nowrap {
  white-space: nowrap !important;
}

/*
========================================================
12. TEXT COLORS
========================================================
*/

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

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

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

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

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

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

/*
========================================================
13. BACKGROUNDS
========================================================
*/

.bg-default {
  background-color: var(--surface-default) !important;
}

.bg-alt {
  background-color: var(--surface-alt) !important;
}

.bg-muted {
  background-color: var(--surface-muted) !important;
}

.bg-brand {
  background-color: var(--surface-brand) !important;
}

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

.bg-accent {
  background-color: var(--surface-accent) !important;
}

.bg-dark {
  background-color: var(--surface-dark) !important;
}

/*
========================================================
14. BORDERS
========================================================
*/

.border-0 {
  border: 0 !important;
}

.border {
  border: 1px solid var(--border-default) !important;
}

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

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

/*
========================================================
15. RADIUS
========================================================
*/

.rounded-0 {
  border-radius: var(--radius-none) !important;
}

.rounded-4 {
  border-radius: var(--radius-4) !important;
}

.rounded-6 {
  border-radius: var(--radius-6) !important;
}

.rounded-8 {
  border-radius: var(--radius-8) !important;
}

.rounded-12 {
  border-radius: var(--radius-12) !important;
}

.rounded-16 {
  border-radius: var(--radius-16) !important;
}

.rounded-pill {
  border-radius: var(--radius-pill) !important;
}

.rounded-circle {
  border-radius: var(--radius-circle) !important;
}

/*
========================================================
16. SHADOWS
========================================================
*/

.shadow-none {
  box-shadow: var(--shadow-none) !important;
}

.shadow-sm {
  box-shadow: var(--shadow-sm) !important;
}

.shadow-md {
  box-shadow: var(--shadow-md) !important;
}

.shadow-lg {
  box-shadow: var(--shadow-lg) !important;
}

/*
========================================================
17. OVERFLOW
========================================================
*/

.overflow-hidden {
  overflow: hidden !important;
}

.overflow-auto {
  overflow: auto !important;
}

.overflow-x-auto {
  overflow-x: auto !important;
}

.overflow-y-auto {
  overflow-y: auto !important;
}

/*
========================================================
18. LISTS
========================================================
*/

.list-unstyled {
  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;
}

/*
========================================================
19. VISIBILITY
========================================================
*/

.invisible {
  visibility: hidden !important;
}

.visible {
  visibility: visible !important;
}

/*
========================================================
20. ACCESSIBILITY
========================================================
*/

.visually-hidden {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;

  padding: 0 !important;
  margin: -1px !important;

  overflow: hidden !important;

  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;

  white-space: nowrap !important;

  border: 0 !important;
}

/*
========================================================
21. OBJECT FIT
========================================================
*/

.object-cover {
  object-fit: cover !important;
}

.object-contain {
  object-fit: contain !important;
}

/*
========================================================
22. POINTER
========================================================
*/

.cursor-pointer {
  cursor: pointer !important;
}

.cursor-default {
  cursor: default !important;
}

.pointer-events-none {
  pointer-events: none !important;
}