/* ══════════════════════════════════════════════════
   Layout utilities
   ══════════════════════════════════════════════════ */

.flex-row        { display: flex; flex-direction: row; }
.flex-col        { display: flex; flex-direction: column; }
.flex-center     { display: flex; align-items: center; justify-content: center; }
.flex-between    { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap       { flex-wrap: wrap; }
.flex-1          { flex: 1; }
.flex-shrink-0   { flex-shrink: 0; }
.flex-grow-0     { flex-grow: 0; }
.min-h-0         { min-height: 0; }
.min-w-0         { min-width: 0; }
.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }

/* ── Alignment ── */

.items-start   { align-items: flex-start; }
.items-center  { align-items: center; }
.items-end     { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end   { justify-content: flex-end; }
.self-center   { align-self: center; }

/* ── Gap ── */

.gap-2xs { gap: var(--ffs-space-2xs); }
.gap-xs  { gap: var(--ffs-space-xs); }
.gap-sm  { gap: var(--ffs-space-sm); }
.gap-md  { gap: var(--ffs-space-md); }
.gap-lg  { gap: var(--ffs-space-lg); }
.gap-xl  { gap: var(--ffs-space-xl); }
.gap-2xl { gap: var(--ffs-space-2xl); }
.gap-3xl { gap: var(--ffs-space-3xl); }

/* ── Padding ── */

.p-0    { padding: 0; }
.p-xs   { padding: var(--ffs-space-xs); }
.p-sm   { padding: var(--ffs-space-sm); }
.p-md   { padding: var(--ffs-space-md); }
.p-lg   { padding: var(--ffs-space-lg); }
.p-xl   { padding: var(--ffs-space-xl); }
.p-2xl  { padding: var(--ffs-space-2xl); }
.p-3xl  { padding: var(--ffs-space-3xl); }

.px-lg  { padding-left: var(--ffs-space-lg); padding-right: var(--ffs-space-lg); }
.px-xl  { padding-left: var(--ffs-space-xl); padding-right: var(--ffs-space-xl); }
.px-3xl { padding-left: var(--ffs-space-3xl); padding-right: var(--ffs-space-3xl); }
.py-md  { padding-top: var(--ffs-space-md); padding-bottom: var(--ffs-space-md); }
.py-lg  { padding-top: var(--ffs-space-lg); padding-bottom: var(--ffs-space-lg); }
.py-xl  { padding-top: var(--ffs-space-xl); padding-bottom: var(--ffs-space-xl); }

/* ── Common combined paddings (match existing patterns) ── */

.p-header   { padding: var(--ffs-space-lg) var(--ffs-space-xl); }
.p-body     { padding: var(--ffs-space-xl) var(--ffs-space-3xl); }
.p-section  { padding: var(--ffs-space-2xl) var(--ffs-space-3xl); }

/* ── Typography ── */

.text-2xs  { font-size: var(--ffs-text-2xs); }
.text-xs   { font-size: var(--ffs-text-xs); }
.text-sm   { font-size: var(--ffs-text-sm); }
.text-base { font-size: var(--ffs-text-base); }
.text-md   { font-size: var(--ffs-text-md); }
.text-lg   { font-size: var(--ffs-text-lg); }

.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }

.text-primary   { color: var(--rz-text-color); }
.text-secondary { color: var(--rz-text-secondary-color); }
.text-disabled  { color: var(--rz-text-disabled-color); }
.text-accent    { color: var(--rz-primary); }
.text-center    { text-align: center; }
.text-nowrap    { white-space: nowrap; }
.text-truncate  { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Borders & radius ── */

.rounded-sm   { border-radius: var(--ffs-radius-sm); }
.rounded-md   { border-radius: var(--ffs-radius-md); }
.rounded-lg   { border-radius: var(--ffs-radius-lg); }
.rounded-pill { border-radius: var(--ffs-radius-pill); }
.rounded-full { border-radius: var(--ffs-radius-circle); }

.border-default { border: var(--ffs-border-default); }
.border-light   { border: var(--ffs-border-light); }
.border-subtle  { border: var(--ffs-border-subtle); }
.border-bottom-light { border-bottom: var(--ffs-border-light); }
.border-bottom-sep   { border-bottom: var(--ffs-border-separator); }

/* ── Shadows ── */

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

/* ── Backgrounds ── */

.bg-surface  { background: var(--rz-base-background-color); }
.bg-hover    { background: var(--ffs-bg-hover); }
.bg-subtle   { background: var(--ffs-bg-subtle); }
.bg-muted    { background: var(--ffs-bg-muted); }
.bg-emphasis { background: var(--ffs-bg-emphasis); }

/* ── Interaction ── */

.cursor-pointer { cursor: pointer; }
.select-none    { user-select: none; }
.pointer-events-none { pointer-events: none; }

/* ── Transitions ── */

.transition-fast   { transition: all var(--ffs-transition-fast); }
.transition-normal { transition: all var(--ffs-transition-normal); }
.transition-bg     { transition: background-color var(--ffs-transition-fast); }

/* ══════════════════════════════════════════════════
   Width
   ══════════════════════════════════════════════════ */

.w-full { width: 100%; }

/* ══════════════════════════════════════════════════
   Margin reset
   ══════════════════════════════════════════════════ */

.m-0 { margin: 0; }

/* ══════════════════════════════════════════════════
   Icon sizing
   ══════════════════════════════════════════════════ */

.icon-xs  { font-size: 0.75rem; }
.icon-sm  { font-size: 0.875rem; }
.icon-md  { font-size: 1rem; }
.icon-lg  { font-size: 1.25rem; }
.icon-xl  { font-size: 1.5rem; }
.icon-2xl { font-size: 1.75rem; }
.icon-3xl { font-size: 2rem; }

/* ══════════════════════════════════════════════════
   Semantic colors
   ══════════════════════════════════════════════════ */

.text-info    { color: var(--rz-info); }
.text-success { color: var(--rz-success); }
.text-warning { color: var(--rz-warning); }
.text-danger  { color: var(--rz-danger); }