/**
 * VETA RH Design System — Utilities
 * Extracted from the most common inline styles across 70+ HTML pages.
 * All values reference --v-* tokens from tokens.css.
 *
 * T3.9 Display | T3.10 Flex | T3.11 Gap | T3.12 Spacing
 * T3.13 Typography | T3.14 Color | T3.15 Responsive | T3.16 Transition
 */

/* === T3.9 — DISPLAY === */

.v-hidden      { display: none; }
.v-block       { display: block; }
.v-inline-flex { display: inline-flex; }
.v-flex        { display: flex; }
.v-grid        { display: grid; }
.v-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* === T3.10 — FLEX === */

.v-flex-between    { display: flex; align-items: center; justify-content: space-between; }
.v-flex-center     { display: flex; align-items: center; justify-content: center; }
.v-flex-col        { display: flex; flex-direction: column; }
.v-flex-wrap       { flex-wrap: wrap; }
.v-items-center    { align-items: center; }
.v-items-start     { align-items: flex-start; }
.v-items-end       { align-items: flex-end; }
.v-justify-between { justify-content: space-between; }

/* === T3.11 — GAP === */

.v-gap-1  { gap: var(--v-space-1); }
.v-gap-2  { gap: var(--v-space-2); }
.v-gap-3  { gap: var(--v-space-3); }
.v-gap-4  { gap: var(--v-space-4); }
.v-gap-5  { gap: var(--v-space-5); }
.v-gap-6  { gap: var(--v-space-6); }
.v-gap-8  { gap: var(--v-space-8); }
.v-gap-10 { gap: var(--v-space-10); }
.v-gap-12 { gap: var(--v-space-12); }

/* === T3.12 — SPACING === */

/* Margin-top */
.v-mt-0 { margin-top: var(--v-space-0); }
.v-mt-1 { margin-top: var(--v-space-1); }
.v-mt-2 { margin-top: var(--v-space-2); }
.v-mt-3 { margin-top: var(--v-space-3); }
.v-mt-4 { margin-top: var(--v-space-4); }
.v-mt-6 { margin-top: var(--v-space-6); }
.v-mt-8 { margin-top: var(--v-space-8); }
/* Margin-bottom */
.v-mb-0 { margin-bottom: var(--v-space-0); }
.v-mb-1 { margin-bottom: var(--v-space-1); }
.v-mb-2 { margin-bottom: var(--v-space-2); }
.v-mb-3 { margin-bottom: var(--v-space-3); }
.v-mb-4 { margin-bottom: var(--v-space-4); }
.v-mb-6 { margin-bottom: var(--v-space-6); }
.v-mb-8 { margin-bottom: var(--v-space-8); }
/* Margin horizontal */
.v-ml-auto { margin-left: auto; }
.v-mr-auto { margin-right: auto; }
.v-mx-auto { margin-left: auto; margin-right: auto; }
/* Padding all sides */
.v-p-2 { padding: var(--v-space-2); }
.v-p-4 { padding: var(--v-space-4); }
.v-p-6 { padding: var(--v-space-6); }
.v-p-8 { padding: var(--v-space-8); }
/* Padding vertical */
.v-py-2 { padding-top: var(--v-space-2); padding-bottom: var(--v-space-2); }
.v-py-4 { padding-top: var(--v-space-4); padding-bottom: var(--v-space-4); }
.v-py-6 { padding-top: var(--v-space-6); padding-bottom: var(--v-space-6); }
.v-py-8 { padding-top: var(--v-space-8); padding-bottom: var(--v-space-8); }
/* Padding horizontal */
.v-px-2 { padding-left: var(--v-space-2); padding-right: var(--v-space-2); }
.v-px-4 { padding-left: var(--v-space-4); padding-right: var(--v-space-4); }
.v-px-6 { padding-left: var(--v-space-6); padding-right: var(--v-space-6); }
.v-px-8 { padding-left: var(--v-space-8); padding-right: var(--v-space-8); }

/* === T3.13 — TYPOGRAPHY === */

.v-text-xs   { font-size: var(--v-text-xs); }
.v-text-sm   { font-size: var(--v-text-sm); }
.v-text-base { font-size: var(--v-text-base); }
.v-text-md   { font-size: var(--v-text-md); }
.v-text-lg   { font-size: var(--v-text-lg); }
.v-text-xl   { font-size: var(--v-text-xl); }
.v-text-2xl  { font-size: var(--v-text-2xl); }
.v-text-3xl  { font-size: var(--v-text-3xl); }
.v-text-4xl  { font-size: var(--v-text-4xl); }
.v-text-5xl  { font-size: var(--v-text-5xl); }
/* Weight */
.v-font-light    { font-weight: var(--v-weight-light); }
.v-font-medium   { font-weight: var(--v-weight-medium); }
.v-font-semibold { font-weight: var(--v-weight-semibold); }
.v-font-bold     { font-weight: var(--v-weight-bold); }
/* Alignment */
.v-text-center { text-align: center; }
.v-text-right  { text-align: right; }
/* Text helpers */
.v-text-muted  { color: var(--v-text-muted); }
.v-text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-text-uppercase { text-transform: uppercase; letter-spacing: var(--v-tracking-wide); }
.v-font-mono { font-family: var(--v-font-mono); }

/* === T3.14 — COLOR === */

.v-text-primary   { color: var(--v-text-primary); }
.v-text-secondary { color: var(--v-text-secondary); }
.v-text-success   { color: var(--v-success); }
.v-text-warning   { color: var(--v-warning); }
.v-text-error     { color: var(--v-error); }
.v-bg-accent  { background-color: var(--v-bg-accent); }
.v-bg-subtle  { background-color: var(--v-bg-subtle); }
.v-bg-surface { background-color: var(--v-bg-surface); }
.v-bg-muted   { background-color: var(--v-bg-muted); }

/* === T3.15 — RESPONSIVE VISIBILITY === */

@media (max-width: 767px)  { .v-hide-mobile  { display: none !important; } }
@media (min-width: 768px)  { .v-hide-desktop { display: none !important; } }
@media print               { .v-hide-print   { display: none !important; } }

/* === T3.16 — TRANSITION === */

.v-transition {
  transition-property: background, color, border-color, box-shadow, opacity;
  transition-duration: var(--v-duration-fast);
  transition-timing-function: var(--v-ease-default);
}
.v-transition-colors {
  transition-property: background, color, border-color;
  transition-duration: var(--v-duration-fast);
  transition-timing-function: var(--v-ease-default);
}
.v-transition-transform {
  transition-property: transform, opacity;
  transition-duration: var(--v-duration-fast);
  transition-timing-function: var(--v-ease-default);
}