/* ============================================================
   FreedomV2 — Utility Classes (estilo Tailwind, prefixo fv-)
   Só classes, nenhum seletor de elemento cru (html/body/*) —
   seguro para conviver em qualquer página que já use Bootstrap.
   ============================================================ */

/* ---------- Display ---------- */
.fv-block        { display: block; }
.fv-inline-block { display: inline-block; }
.fv-inline       { display: inline; }
.fv-flex         { display: flex; }
.fv-inline-flex  { display: inline-flex; }
.fv-grid         { display: grid; }
.fv-hidden       { display: none; }

/* ---------- Flex ---------- */
.fv-flex-row    { flex-direction: row; }
.fv-flex-col    { flex-direction: column; }
.fv-flex-wrap   { flex-wrap: wrap; }
.fv-flex-nowrap { flex-wrap: nowrap; }
.fv-items-start   { align-items: flex-start; }
.fv-items-center  { align-items: center; }
.fv-items-end     { align-items: flex-end; }
.fv-items-stretch { align-items: stretch; }
.fv-justify-start   { justify-content: flex-start; }
.fv-justify-center  { justify-content: center; }
.fv-justify-end     { justify-content: flex-end; }
.fv-justify-between { justify-content: space-between; }
.fv-justify-around  { justify-content: space-around; }
.fv-flex-1    { flex: 1 1 0%; }
.fv-flex-auto { flex: 1 1 auto; }
.fv-flex-none { flex: none; }
.fv-shrink-0  { flex-shrink: 0; }

/* ---------- Grid ---------- */
.fv-grid-cols-1  { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.fv-grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fv-grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fv-grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fv-grid-cols-6  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.fv-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.fv-col-span-1  { grid-column: span 1 / span 1; }
.fv-col-span-2  { grid-column: span 2 / span 2; }
.fv-col-span-3  { grid-column: span 3 / span 3; }
.fv-col-span-4  { grid-column: span 4 / span 4; }
.fv-col-span-6  { grid-column: span 6 / span 6; }
.fv-col-span-12 { grid-column: span 12 / span 12; }

/* ---------- Gap ---------- */
.fv-gap-0  { gap: var(--fv-space-0); }
.fv-gap-1  { gap: var(--fv-space-1); }
.fv-gap-2  { gap: var(--fv-space-2); }
.fv-gap-3  { gap: var(--fv-space-3); }
.fv-gap-4  { gap: var(--fv-space-4); }
.fv-gap-5  { gap: var(--fv-space-5); }
.fv-gap-6  { gap: var(--fv-space-6); }
.fv-gap-8  { gap: var(--fv-space-8); }

/* ---------- Position ---------- */
.fv-relative { position: relative; }
.fv-absolute { position: absolute; }
.fv-fixed    { position: fixed; }
.fv-sticky   { position: sticky; }
.fv-inset-0  { top: 0; right: 0; bottom: 0; left: 0; }

/* ---------- Spacing: padding ---------- */
.fv-p-0  { padding: var(--fv-space-0); }
.fv-p-1  { padding: var(--fv-space-1); }
.fv-p-2  { padding: var(--fv-space-2); }
.fv-p-3  { padding: var(--fv-space-3); }
.fv-p-4  { padding: var(--fv-space-4); }
.fv-p-5  { padding: var(--fv-space-5); }
.fv-p-6  { padding: var(--fv-space-6); }
.fv-p-8  { padding: var(--fv-space-8); }
.fv-p-10 { padding: var(--fv-space-10); }
.fv-p-12 { padding: var(--fv-space-12); }

.fv-px-0  { padding-left: var(--fv-space-0);  padding-right: var(--fv-space-0); }
.fv-px-1  { padding-left: var(--fv-space-1);  padding-right: var(--fv-space-1); }
.fv-px-2  { padding-left: var(--fv-space-2);  padding-right: var(--fv-space-2); }
.fv-px-3  { padding-left: var(--fv-space-3);  padding-right: var(--fv-space-3); }
.fv-px-4  { padding-left: var(--fv-space-4);  padding-right: var(--fv-space-4); }
.fv-px-5  { padding-left: var(--fv-space-5);  padding-right: var(--fv-space-5); }
.fv-px-6  { padding-left: var(--fv-space-6);  padding-right: var(--fv-space-6); }
.fv-px-8  { padding-left: var(--fv-space-8);  padding-right: var(--fv-space-8); }

.fv-py-0  { padding-top: var(--fv-space-0);  padding-bottom: var(--fv-space-0); }
.fv-py-1  { padding-top: var(--fv-space-1);  padding-bottom: var(--fv-space-1); }
.fv-py-2  { padding-top: var(--fv-space-2);  padding-bottom: var(--fv-space-2); }
.fv-py-3  { padding-top: var(--fv-space-3);  padding-bottom: var(--fv-space-3); }
.fv-py-4  { padding-top: var(--fv-space-4);  padding-bottom: var(--fv-space-4); }
.fv-py-5  { padding-top: var(--fv-space-5);  padding-bottom: var(--fv-space-5); }
.fv-py-6  { padding-top: var(--fv-space-6);  padding-bottom: var(--fv-space-6); }
.fv-py-8  { padding-top: var(--fv-space-8);  padding-bottom: var(--fv-space-8); }

.fv-pt-0 { padding-top: var(--fv-space-0); } .fv-pt-1 { padding-top: var(--fv-space-1); }
.fv-pt-2 { padding-top: var(--fv-space-2); } .fv-pt-3 { padding-top: var(--fv-space-3); }
.fv-pt-4 { padding-top: var(--fv-space-4); } .fv-pt-6 { padding-top: var(--fv-space-6); }
.fv-pb-0 { padding-bottom: var(--fv-space-0); } .fv-pb-1 { padding-bottom: var(--fv-space-1); }
.fv-pb-2 { padding-bottom: var(--fv-space-2); } .fv-pb-3 { padding-bottom: var(--fv-space-3); }
.fv-pb-4 { padding-bottom: var(--fv-space-4); } .fv-pb-6 { padding-bottom: var(--fv-space-6); }

/* ---------- Spacing: margin ---------- */
.fv-m-0  { margin: var(--fv-space-0); }
.fv-m-1  { margin: var(--fv-space-1); }
.fv-m-2  { margin: var(--fv-space-2); }
.fv-m-3  { margin: var(--fv-space-3); }
.fv-m-4  { margin: var(--fv-space-4); }
.fv-m-6  { margin: var(--fv-space-6); }
.fv-mx-auto { margin-left: auto; margin-right: auto; }

.fv-mt-0 { margin-top: var(--fv-space-0); } .fv-mt-1 { margin-top: var(--fv-space-1); }
.fv-mt-2 { margin-top: var(--fv-space-2); } .fv-mt-3 { margin-top: var(--fv-space-3); }
.fv-mt-4 { margin-top: var(--fv-space-4); } .fv-mt-6 { margin-top: var(--fv-space-6); }
.fv-mt-8 { margin-top: var(--fv-space-8); }
.fv-mb-0 { margin-bottom: var(--fv-space-0); } .fv-mb-1 { margin-bottom: var(--fv-space-1); }
.fv-mb-2 { margin-bottom: var(--fv-space-2); } .fv-mb-3 { margin-bottom: var(--fv-space-3); }
.fv-mb-4 { margin-bottom: var(--fv-space-4); } .fv-mb-6 { margin-bottom: var(--fv-space-6); }
.fv-mb-8 { margin-bottom: var(--fv-space-8); }
.fv-ml-1 { margin-left: var(--fv-space-1); } .fv-ml-2 { margin-left: var(--fv-space-2); }
.fv-ml-3 { margin-left: var(--fv-space-3); } .fv-ml-4 { margin-left: var(--fv-space-4); }
.fv-mr-1 { margin-right: var(--fv-space-1); } .fv-mr-2 { margin-right: var(--fv-space-2); }
.fv-mr-3 { margin-right: var(--fv-space-3); } .fv-mr-4 { margin-right: var(--fv-space-4); }

/* ---------- Sizing ---------- */
.fv-w-full  { width: 100%; }
.fv-w-auto  { width: auto; }
.fv-w-1\/2  { width: 50%; }
.fv-w-1\/3  { width: 33.3333%; }
.fv-w-2\/3  { width: 66.6667%; }
.fv-w-1\/4  { width: 25%; }
.fv-w-3\/4  { width: 75%; }
.fv-h-full  { height: 100%; }
.fv-h-auto  { height: auto; }
.fv-min-h-screen { min-height: 100vh; }
.fv-max-w-xs  { max-width: 320px; }
.fv-max-w-sm  { max-width: 384px; }
.fv-max-w-md  { max-width: 480px; }
.fv-max-w-lg  { max-width: 576px; }
.fv-max-w-xl  { max-width: 720px; }
.fv-max-w-2xl { max-width: 960px; }
.fv-max-w-full { max-width: 100%; }

/* ---------- Tipografia ---------- */
.fv-text-xs   { font-size: var(--fv-text-xs);   line-height: var(--fv-leading-xs); }
.fv-text-sm   { font-size: var(--fv-text-sm);   line-height: var(--fv-leading-sm); }
.fv-text-base { font-size: var(--fv-text-base); line-height: var(--fv-leading-base); }
.fv-text-lg   { font-size: var(--fv-text-lg);   line-height: var(--fv-leading-lg); }
.fv-text-xl   { font-size: var(--fv-text-xl);   line-height: var(--fv-leading-xl); }
.fv-text-2xl  { font-size: var(--fv-text-2xl);  line-height: var(--fv-leading-2xl); }
.fv-text-3xl  { font-size: var(--fv-text-3xl);  line-height: var(--fv-leading-3xl); }
.fv-text-4xl  { font-size: var(--fv-text-4xl);  line-height: var(--fv-leading-4xl); }

.fv-font-normal    { font-weight: var(--fv-font-normal); }
.fv-font-medium    { font-weight: var(--fv-font-medium); }
.fv-font-semibold  { font-weight: var(--fv-font-semibold); }
.fv-font-bold      { font-weight: var(--fv-font-bold); }
.fv-font-extrabold { font-weight: var(--fv-font-extrabold); }

.fv-text-left    { text-align: left; }
.fv-text-center  { text-align: center; }
.fv-text-right   { text-align: right; }
.fv-uppercase    { text-transform: uppercase; }
.fv-lowercase    { text-transform: lowercase; }
.fv-capitalize   { text-transform: capitalize; }
.fv-truncate     { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Cor de texto ---------- */
.fv-text-primary   { color: var(--fv-primary); }
.fv-text-accent    { color: var(--fv-accent); }
.fv-text-success   { color: var(--fv-success-700); }
.fv-text-danger    { color: var(--fv-danger-700); }
.fv-text-warning   { color: var(--fv-warning-700); }
.fv-text-info      { color: var(--fv-info-700); }
.fv-text-muted     { color: var(--fv-text-muted); }
.fv-text-body      { color: var(--fv-text); }
.fv-text-white     { color: #ffffff; }

/* ---------- Cor de fundo ---------- */
.fv-bg-primary     { background-color: var(--fv-primary); }
.fv-bg-primary-50  { background-color: var(--fv-primary-50); }
.fv-bg-primary-100 { background-color: var(--fv-primary-100); }
.fv-bg-accent      { background-color: var(--fv-accent); }
.fv-bg-accent-100  { background-color: var(--fv-accent-100); }
.fv-bg-success-50  { background-color: var(--fv-success-50); }
.fv-bg-danger-50   { background-color: var(--fv-danger-50); }
.fv-bg-warning-50  { background-color: var(--fv-warning-50); }
.fv-bg-info-50     { background-color: var(--fv-info-50); }
.fv-bg-surface     { background-color: var(--fv-surface); }
.fv-bg-surface-alt { background-color: var(--fv-surface-alt); }
.fv-bg-white       { background-color: #ffffff; }
.fv-bg-transparent { background-color: transparent; }

/* ---------- Bordas / raio / sombra ---------- */
.fv-border    { border: 1px solid var(--fv-border); }
.fv-border-0  { border: none; }
.fv-border-t  { border-top: 1px solid var(--fv-border); }
.fv-border-b  { border-bottom: 1px solid var(--fv-border); }

.fv-rounded-none { border-radius: 0; }
.fv-rounded-sm   { border-radius: var(--fv-radius-sm); }
.fv-rounded-md   { border-radius: var(--fv-radius-md); }
.fv-rounded-lg   { border-radius: var(--fv-radius-lg); }
.fv-rounded-xl   { border-radius: var(--fv-radius-xl); }
.fv-rounded-2xl  { border-radius: var(--fv-radius-2xl); }
.fv-rounded-full { border-radius: var(--fv-radius-full); }

.fv-shadow-none { box-shadow: none; }
.fv-shadow-sm   { box-shadow: var(--fv-shadow-sm); }
.fv-shadow-md   { box-shadow: var(--fv-shadow-md); }
.fv-shadow-lg   { box-shadow: var(--fv-shadow-lg); }

/* ---------- Diversos ---------- */
.fv-cursor-pointer { cursor: pointer; }
.fv-overflow-hidden { overflow: hidden; }
.fv-overflow-auto   { overflow: auto; }
.fv-transition {
  transition: background-color .15s ease, border-color .15s ease,
              color .15s ease, box-shadow .15s ease, transform .15s ease;
}

/* ============================================================
   Responsivo — prefixo fv-{breakpoint}:
   md = a partir de 768px · lg = a partir de 1024px
   Cobre display, direção do flex e colunas de grid, que é o que
   esse sistema usa de fato hoje. Para outros utilitários
   responsivos, seguir o mesmo padrão (duplicar a regra dentro
   do @media correspondente).
   ============================================================ */
@media (min-width: 768px) {
  .fv-md\:block  { display: block; }
  .fv-md\:flex   { display: flex; }
  .fv-md\:grid   { display: grid; }
  .fv-md\:hidden { display: none; }
  .fv-md\:flex-row { flex-direction: row; }
  .fv-md\:flex-col { flex-direction: column; }
  .fv-md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .fv-md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fv-md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fv-md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .fv-lg\:block  { display: block; }
  .fv-lg\:flex   { display: flex; }
  .fv-lg\:grid   { display: grid; }
  .fv-lg\:hidden { display: none; }
  .fv-lg\:flex-row { flex-direction: row; }
  .fv-lg\:flex-col { flex-direction: column; }
  .fv-lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .fv-lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fv-lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fv-lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fv-lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Abaixo de 768px — útil para esconder algo só no mobile */
@media (max-width: 767px) {
  .fv-max-md\:hidden { display: none; }
}