/* =====================
   LAYOUT UTILITIES
   ===================== */
.flex             { display: flex; }
.flex-col         { flex-direction: column; }
.flex-wrap        { flex-wrap: wrap; }
.flex-1           { flex: 1 1 0%; }
.grid             { display: grid; }
.items-center     { align-items: center; }
.justify-between  { justify-content: space-between; }
.justify-center   { justify-content: center; }
.w-full           { width: 100%; }
.max-w-md         { max-width: 28rem; }
.h-full           { height: 100%; }
.hidden           { display: none !important; }
.cursor-pointer   { cursor: pointer; }
.whitespace-nowrap { white-space: nowrap; }
.overflow-hidden  { overflow: hidden; }

/* =====================
   TEXT UTILITIES
   ===================== */
.text-left        { text-align: left; }
.text-right       { text-align: right; }
.text-center      { text-align: center; }
.text-xs          { font-size: .75rem; }
.text-sm          { font-size: .875rem; }
.text-xl          { font-size: 1.25rem; }
.text-2xl         { font-size: 1.5rem; }
.text-3xl         { font-size: 1.875rem; }
.text-4xl         { font-size: 2.25rem; }
.text-5xl         { font-size: 3rem; }
.font-bold        { font-weight: 700; }
.font-medium      { font-weight: 500; }
.font-mono        { font-family: monospace; }
.uppercase        { text-transform: uppercase; }
.tracking-tight   { letter-spacing: -0.025em; }
.tracking-widest  { letter-spacing: 0.1em; }
.text-muted       { color: var(--muted); }
.text-red-500     { color: var(--red); }
.text-green-500   { color: var(--green); }
.opacity-50       { opacity: .5; }

/* =====================
   DIVIDERS
   ===================== */
hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 0;
}

.leaf-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 5px;
    opacity: 0.35;
}

.leaf-divider hr   { flex: 1; border-top: 1px solid var(--muted); }
.leaf-divider span { font-size: 0.8rem; color: var(--muted); }

/* =====================
   SECTION LABEL
   ===================== */
.section-label {
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--muted);
    opacity: 0.25;
}