/* ============================================================
   BILHON OS Design System v2.0 — Utility Classes
   Prefix: .bl-
   Author: Homer (Romulo Henricco)
   ============================================================ */

/* ── Display ─────────────────────────────────────────────── */
.bl-hidden       { display: none !important; }
.bl-block        { display: block; }
.bl-flex         { display: flex; }
.bl-inline-flex  { display: inline-flex; }
.bl-grid-d       { display: grid; }

/* ── Flex Direction / Wrap ────────────────────────────────── */
.bl-flex-row     { flex-direction: row; }
.bl-flex-col     { flex-direction: column; }
.bl-flex-wrap    { flex-wrap: wrap; }
.bl-flex-1       { flex: 1; }
.bl-flex-shrink-0 { flex-shrink: 0; }

/* ── Flex Alignment ──────────────────────────────────────── */
.bl-items-center  { align-items: center; }
.bl-items-start   { align-items: flex-start; }
.bl-items-end     { align-items: flex-end; }
.bl-items-stretch { align-items: stretch; }

.bl-justify-start   { justify-content: flex-start; }
.bl-justify-center  { justify-content: center; }
.bl-justify-end     { justify-content: flex-end; }
.bl-justify-between { justify-content: space-between; }

/* ── Gap ─────────────────────────────────────────────────── */
.bl-gap-1 { gap: 0.25rem; }
.bl-gap-2 { gap: 0.5rem; }
.bl-gap-3 { gap: 0.75rem; }
.bl-gap-4 { gap: 1rem; }
.bl-gap-5 { gap: 1.25rem; }
.bl-gap-6 { gap: 1.5rem; }
.bl-gap-7 { gap: 1.75rem; }
.bl-gap-8 { gap: 2rem; }

/* ── Padding ─────────────────────────────────────────────── */
.bl-p-0 { padding: 0; }
.bl-p-1 { padding: 0.25rem; }
.bl-p-2 { padding: 0.5rem; }
.bl-p-3 { padding: 0.75rem; }
.bl-p-4 { padding: 1rem; }
.bl-p-5 { padding: 1.25rem; }
.bl-p-6 { padding: 1.5rem; }
.bl-p-7 { padding: 1.75rem; }
.bl-p-8 { padding: 2rem; }

.bl-px-2 { padding-left: 0.5rem;  padding-right: 0.5rem; }
.bl-px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.bl-px-4 { padding-left: 1rem;    padding-right: 1rem; }
.bl-px-6 { padding-left: 1.5rem;  padding-right: 1.5rem; }

.bl-py-2 { padding-top: 0.5rem;  padding-bottom: 0.5rem; }
.bl-py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.bl-py-4 { padding-top: 1rem;    padding-bottom: 1rem; }
.bl-py-6 { padding-top: 1.5rem;  padding-bottom: 1.5rem; }

/* ── Margin ──────────────────────────────────────────────── */
.bl-m-0    { margin: 0; }
.bl-m-auto { margin: auto; }

.bl-mt-1 { margin-top: 0.25rem; }
.bl-mt-2 { margin-top: 0.5rem; }
.bl-mt-3 { margin-top: 0.75rem; }
.bl-mt-4 { margin-top: 1rem; }
.bl-mt-5 { margin-top: 1.25rem; }
.bl-mt-6 { margin-top: 1.5rem; }
.bl-mt-7 { margin-top: 1.75rem; }
.bl-mt-8 { margin-top: 2rem; }

.bl-mb-1 { margin-bottom: 0.25rem; }
.bl-mb-2 { margin-bottom: 0.5rem; }
.bl-mb-3 { margin-bottom: 0.75rem; }
.bl-mb-4 { margin-bottom: 1rem; }
.bl-mb-5 { margin-bottom: 1.25rem; }
.bl-mb-6 { margin-bottom: 1.5rem; }
.bl-mb-7 { margin-bottom: 1.75rem; }
.bl-mb-8 { margin-bottom: 2rem; }

.bl-ml-auto { margin-left: auto; }
.bl-mr-auto { margin-right: auto; }

/* ── Overflow ────────────────────────────────────────────── */
.bl-overflow-hidden  { overflow: hidden; }
.bl-overflow-auto    { overflow: auto; }
.bl-overflow-x-auto  { overflow-x: auto; }
.bl-overflow-y-auto  { overflow-y: auto; }
.bl-overflow-visible { overflow: visible; }

/* ── Position ────────────────────────────────────────────── */
.bl-relative { position: relative; }
.bl-absolute { position: absolute; }
.bl-fixed    { position: fixed; }
.bl-sticky   { position: sticky; }

/* ── Border ──────────────────────────────────────────────── */
.bl-border-0      { border: none; }
.bl-border        { border: 1px solid var(--bl-border-default, rgba(255,255,255,0.06)); }
.bl-border-top    { border-top: 1px solid var(--bl-border-default, rgba(255,255,255,0.06)); }
.bl-border-bottom { border-bottom: 1px solid var(--bl-border-default, rgba(255,255,255,0.06)); }
.bl-border-left   { border-left: 1px solid var(--bl-border-default, rgba(255,255,255,0.06)); }
.bl-border-right  { border-right: 1px solid var(--bl-border-default, rgba(255,255,255,0.06)); }

/* ── Border Radius ───────────────────────────────────────── */
.bl-rounded-none { border-radius: 0; }
.bl-rounded-sm   { border-radius: var(--bl-radius-sm, 4px); }
.bl-rounded      { border-radius: var(--bl-radius-md, 8px); }
.bl-rounded-lg   { border-radius: var(--bl-radius-lg, 12px); }
.bl-rounded-xl   { border-radius: var(--bl-radius-xl, 16px); }
.bl-rounded-full { border-radius: 9999px; }

/* ── Background ──────────────────────────────────────────── */
.bl-bg-transparent { background-color: transparent; }
.bl-bg-primary     { background-color: var(--bl-bg-primary); }
.bl-bg-elevated    { background-color: var(--bl-bg-elevated); }
.bl-bg-surface     { background-color: var(--bl-bg-surface); }
.bl-bg-card        { background-color: var(--bl-bg-card); }
.bl-bg-accent      { background-color: var(--bl-accent, #6bc950); }

/* ── Opacity ─────────────────────────────────────────────── */
.bl-opacity-0   { opacity: 0; }
.bl-opacity-25  { opacity: 0.25; }
.bl-opacity-50  { opacity: 0.5; }
.bl-opacity-75  { opacity: 0.75; }
.bl-opacity-100 { opacity: 1; }

/* ── Cursor ──────────────────────────────────────────────── */
.bl-cursor-pointer  { cursor: pointer; }
.bl-cursor-default  { cursor: default; }
.bl-cursor-not-allowed { cursor: not-allowed; }
.bl-cursor-grab     { cursor: grab; }

/* ── Text Align ──────────────────────────────────────────── */
.bl-text-left   { text-align: left; }
.bl-text-center { text-align: center; }
.bl-text-right  { text-align: right; }

/* ── Width / Height ──────────────────────────────────────── */
.bl-w-full  { width: 100%; }
.bl-w-auto  { width: auto; }
.bl-w-fit   { width: fit-content; }
.bl-h-full  { height: 100%; }
.bl-h-auto  { height: auto; }
.bl-h-screen { height: 100vh; }
.bl-min-h-0      { min-height: 0; }
.bl-min-h-screen { min-height: 100vh; }
.bl-max-w-full   { max-width: 100%; }

/* ── Screen Reader Only ──────────────────────────────────── */
.bl-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}