/* ============================================================
   UTILITY CLASSES
   Token-driven helpers that complement (not replace) Bootstrap.
   Prefer Bootstrap utilities for generic spacing/flex; use these
   when you need a value tied to a Bajaj Finserv design token.
   Naming: .bf-{property}-{token}
   ============================================================ */

/* ---- Display --------------------------------------------- */
.bf-d-none     { display: none !important; }
.bf-d-block    { display: block !important; }
.bf-d-inline   { display: inline !important; }
.bf-d-iblock   { display: inline-block !important; }
.bf-d-flex     { display: flex !important; }
.bf-d-iflex    { display: inline-flex !important; }
.bf-d-grid     { display: grid !important; }

/* ---- Flexbox --------------------------------------------- */
.bf-flex-row     { flex-direction: row !important; }
.bf-flex-col     { flex-direction: column !important; }
.bf-flex-wrap    { flex-wrap: wrap !important; }
.bf-flex-nowrap  { flex-wrap: nowrap !important; }
.bf-flex-1       { flex: 1 1 0% !important; }
.bf-flex-grow    { flex-grow: 1 !important; }
.bf-flex-shrink-0{ flex-shrink: 0 !important; }
.bf-items-start  { align-items: flex-start !important; }
.bf-items-center { align-items: center !important; }
.bf-items-end    { align-items: flex-end !important; }
.bf-items-stretch{ align-items: stretch !important; }
.bf-justify-start   { justify-content: flex-start !important; }
.bf-justify-center  { justify-content: center !important; }
.bf-justify-end     { justify-content: flex-end !important; }
.bf-justify-between { justify-content: space-between !important; }
.bf-justify-around  { justify-content: space-around !important; }
.bf-self-start   { align-self: flex-start !important; }
.bf-self-center  { align-self: center !important; }
.bf-self-stretch { align-self: stretch !important; }

/* ---- Grid ------------------------------------------------ */
.bf-grid-2 { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; }
.bf-grid-3 { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; }
.bf-grid-4 { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; }
.bf-grid-auto { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; }

/* ---- Gap (spacing scale) --------------------------------- */
.bf-gap-0  { gap: var(--space-0) !important; }
.bf-gap-1  { gap: var(--space-3) !important; }   /* 8  */
.bf-gap-2  { gap: var(--space-4) !important; }   /* 10 */
.bf-gap-3  { gap: var(--space-7) !important; }   /* 15 */
.bf-gap-4  { gap: var(--space-9) !important; }   /* 20 */
.bf-gap-5  { gap: var(--space-11) !important; }  /* 25 */
.bf-gap-6  { gap: var(--space-12) !important; }  /* 30 */
.bf-gap-8  { gap: var(--space-13) !important; }  /* 40 */

/* ---- Margin ---------------------------------------------- */
.bf-m-0  { margin: var(--space-0) !important; }
.bf-m-auto { margin: auto !important; }
.bf-mx-auto { margin-inline: auto !important; }
.bf-mt-1 { margin-top: var(--space-3) !important; }
.bf-mt-2 { margin-top: var(--space-7) !important; }
.bf-mt-3 { margin-top: var(--space-9) !important; }
.bf-mt-4 { margin-top: var(--space-12) !important; }
.bf-mt-5 { margin-top: var(--space-13) !important; }
.bf-mb-1 { margin-bottom: var(--space-3) !important; }
.bf-mb-2 { margin-bottom: var(--space-7) !important; }
.bf-mb-3 { margin-bottom: var(--space-9) !important; }
.bf-mb-4 { margin-bottom: var(--space-12) !important; }
.bf-mb-5 { margin-bottom: var(--space-13) !important; }

/* ---- Padding --------------------------------------------- */
.bf-p-0  { padding: var(--space-0) !important; }
.bf-p-2  { padding: var(--space-7) !important; }   /* 15 */
.bf-p-3  { padding: var(--space-9) !important; }   /* 20 */
.bf-p-4  { padding: var(--space-12) !important; }  /* 30 */
.bf-p-5  { padding: var(--space-13) !important; }  /* 40 */
.bf-px-3 { padding-inline: var(--space-9) !important; }
.bf-py-3 { padding-block: var(--space-9) !important; }
.bf-px-4 { padding-inline: var(--space-12) !important; }
.bf-py-4 { padding-block: var(--space-12) !important; }
.bf-py-section { padding-block: var(--space-16) !important; }

/* ---- Width & Height -------------------------------------- */
.bf-w-full   { width: 100% !important; }
.bf-w-auto   { width: auto !important; }
.bf-w-fit    { width: fit-content !important; }
.bf-h-full   { height: 100% !important; }
.bf-h-screen { height: 100vh !important; }
.bf-min-h-0  { min-height: 0 !important; }
.bf-max-w-content { max-width: var(--container-content) !important; }

/* ---- Typography ------------------------------------------ */
.bf-font-primary   { font-family: var(--font-primary) !important; }
.bf-font-secondary { font-family: var(--font-secondary) !important; }

.bf-fs-xs   { font-size: var(--fs-xs) !important; }
.bf-fs-sm   { font-size: var(--fs-sm) !important; }
.bf-fs-base { font-size: var(--fs-base) !important; }
.bf-fs-md   { font-size: var(--fs-md) !important; }
.bf-fs-lg   { font-size: var(--fs-lg) !important; }
.bf-fs-xl   { font-size: var(--fs-xl) !important; }
.bf-fs-2xl  { font-size: var(--fs-2xl) !important; }
.bf-fs-3xl  { font-size: var(--fs-3xl) !important; }
.bf-fs-4xl  { font-size: var(--fs-4xl) !important; }
.bf-fs-5xl  { font-size: var(--fs-5xl) !important; }
.bf-fs-6xl  { font-size: var(--fs-6xl) !important; }

.bf-fw-light    { font-weight: var(--fw-light) !important; }
.bf-fw-regular  { font-weight: var(--fw-regular) !important; }
.bf-fw-medium   { font-weight: var(--fw-medium) !important; }
.bf-fw-semibold { font-weight: var(--fw-semibold) !important; }
.bf-fw-bold     { font-weight: var(--fw-bold) !important; }

.bf-lh-none    { line-height: var(--lh-none) !important; }
.bf-lh-tight   { line-height: var(--lh-tight) !important; }
.bf-lh-normal  { line-height: var(--lh-normal) !important; }
.bf-lh-relaxed { line-height: var(--lh-relaxed) !important; }

.bf-ls-tight  { letter-spacing: var(--ls-tight) !important; }
.bf-ls-wide   { letter-spacing: var(--ls-wide) !important; }

.bf-text-left    { text-align: left !important; }
.bf-text-center  { text-align: center !important; }
.bf-text-right   { text-align: right !important; }
.bf-uppercase    { text-transform: uppercase !important; }
.bf-truncate     { overflow: hidden; text-overflow: ellipsis; white-space: nowrap !important; }
.bf-text-balance { text-wrap: balance !important; }
.bf-text-pretty  { text-wrap: pretty !important; }

/* ---- Colours (text) -------------------------------------- */
.bf-text-primary   { color: var(--color-primary) !important; }
.bf-text-strong    { color: var(--color-text-strong) !important; }
.bf-text-body      { color: var(--color-text) !important; }
.bf-text-muted     { color: var(--color-text-muted) !important; }
.bf-text-inverse   { color: var(--color-text-inverse) !important; }
.bf-text-accent    { color: var(--color-accent) !important; }
.bf-text-success   { color: var(--bf-success) !important; }
.bf-text-warning   { color: var(--bf-warning) !important; }
.bf-text-error     { color: var(--bf-error) !important; }

/* ---- Colours (background) -------------------------------- */
.bf-bg-primary   { background-color: var(--color-primary) !important; }
.bf-bg-navy      { background-color: var(--bf-navy) !important; }
.bf-bg-accent    { background-color: var(--color-accent) !important; }
.bf-bg-surface   { background-color: var(--color-surface) !important; }
.bf-bg-subtle    { background-color: var(--color-bg-subtle) !important; }
.bf-bg-tint      { background-color: var(--color-surface-tint) !important; }
.bf-bg-transparent { background-color: transparent !important; }

/* ---- Borders --------------------------------------------- */
.bf-border      { border: 1px solid var(--color-border) !important; }
.bf-border-top  { border-top: 1px solid var(--color-border) !important; }
.bf-border-bottom { border-bottom: 1px solid var(--color-border) !important; }
.bf-border-strong { border-color: var(--color-border-strong) !important; }
.bf-border-primary { border-color: var(--color-primary) !important; }
.bf-border-0    { border: 0 !important; }

/* ---- Border radius --------------------------------------- */
.bf-rounded-0    { border-radius: 0 !important; }
.bf-rounded-xs   { border-radius: var(--radius-xs) !important; }
.bf-rounded-sm   { border-radius: var(--radius-sm) !important; }
.bf-rounded-md   { border-radius: var(--radius-md) !important; }
.bf-rounded-lg   { border-radius: var(--radius-lg) !important; }
.bf-rounded-pill { border-radius: var(--radius-pill) !important; }
.bf-rounded-full { border-radius: var(--radius-circle) !important; }

/* ---- Shadows --------------------------------------------- */
.bf-shadow-none { box-shadow: none !important; }
.bf-shadow-xs   { box-shadow: var(--shadow-xs) !important; }
.bf-shadow-sm   { box-shadow: var(--shadow-sm) !important; }
.bf-shadow-md   { box-shadow: var(--shadow-md) !important; }
.bf-shadow-card { box-shadow: var(--shadow-card) !important; }
.bf-shadow-lg   { box-shadow: var(--shadow-lg) !important; }

/* ---- Position -------------------------------------------- */
.bf-relative { position: relative !important; }
.bf-absolute { position: absolute !important; }
.bf-fixed    { position: fixed !important; }
.bf-sticky   { position: sticky !important; }
.bf-static   { position: static !important; }
.bf-inset-0  { inset: 0 !important; }
.bf-top-0    { top: 0 !important; }
.bf-bottom-0 { bottom: 0 !important; }

/* ---- Overflow -------------------------------------------- */
.bf-overflow-hidden  { overflow: hidden !important; }
.bf-overflow-auto    { overflow: auto !important; }
.bf-overflow-x-auto  { overflow-x: auto !important; }
.bf-overflow-y-auto  { overflow-y: auto !important; }
.bf-overflow-visible { overflow: visible !important; }

/* ---- Opacity --------------------------------------------- */
.bf-opacity-0   { opacity: 0 !important; }
.bf-opacity-20  { opacity: 0.2 !important; }
.bf-opacity-50  { opacity: 0.5 !important; }
.bf-opacity-75  { opacity: 0.75 !important; }
.bf-opacity-100 { opacity: 1 !important; }

/* ---- Z-index --------------------------------------------- */
.bf-z-0        { z-index: var(--z-base) !important; }
.bf-z-dropdown { z-index: var(--z-dropdown) !important; }
.bf-z-sticky   { z-index: var(--z-sticky) !important; }
.bf-z-fixed    { z-index: var(--z-fixed) !important; }
.bf-z-modal    { z-index: var(--z-modal) !important; }

/* ---- Misc ------------------------------------------------ */
.bf-pointer      { cursor: pointer !important; }
.bf-not-allowed  { cursor: not-allowed !important; }
.bf-select-none  { user-select: none !important; }
.bf-transition   { transition: all var(--transition-base) var(--ease-standard) !important; }
.bf-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}