/* ==========================================================================
   Utilities — single-purpose helper classes
   ========================================================================== */

@layer utilities {
    /* Display */
    .d-none    { display: none !important; }
    .d-block   { display: block !important; }
    .d-flex    { display: flex !important; }
    .d-grid    { display: grid !important; }
    .d-inline  { display: inline !important; }
    .d-inline-flex { display: inline-flex !important; }

    /* Flex helpers */
    .flex-center   { display: flex; align-items: center; justify-content: center; }
    .flex-between  { display: flex; align-items: center; justify-content: space-between; }
    .flex-start    { display: flex; align-items: center; justify-content: flex-start; }
    .flex-col      { flex-direction: column; }
    .flex-wrap     { flex-wrap: wrap; }
    .flex-1        { flex: 1; }
    .flex-shrink-0 { flex-shrink: 0; }
    .gap-2         { gap: var(--space-2); }
    .gap-4         { gap: var(--space-4); }
    .gap-6         { gap: var(--space-6); }

    /* Spacing */
    .mt-0  { margin-top: 0 !important; }
    .mt-2  { margin-top: var(--space-2) !important; }
    .mt-4  { margin-top: var(--space-4) !important; }
    .mt-8  { margin-top: var(--space-8) !important; }
    .mb-0  { margin-bottom: 0 !important; }
    .mb-4  { margin-bottom: var(--space-4) !important; }
    .mb-8  { margin-bottom: var(--space-8) !important; }
    .p-4   { padding: var(--space-4) !important; }
    .p-6   { padding: var(--space-6) !important; }

    /* Typography */
    .text-xs    { font-size: var(--text-xs); }
    .text-sm    { font-size: var(--text-sm); }
    .text-base  { font-size: var(--text-base); }
    .text-lg    { font-size: var(--text-lg); }
    .text-xl    { font-size: var(--text-xl); }
    .text-serif { font-family: var(--font-heading); }
    .text-mono  { font-family: var(--font-mono); }
    .text-center { text-align: center; }
    .text-right  { text-align: right; }
    .font-bold   { font-weight: 700; }
    .font-600    { font-weight: 600; }
    .uppercase   { text-transform: uppercase; letter-spacing: var(--tracking-wide); }

    /* Colors */
    .text-primary   { color: var(--color-text-primary); }
    .text-secondary { color: var(--color-text-secondary); }
    .text-muted     { color: var(--color-text-muted); }
    .text-gold      { color: var(--color-gold); }
    .text-purple    { color: var(--color-purple); }

    /* Backgrounds */
    .bg-obsidian { background-color: var(--color-obsidian); }
    .bg-vault    { background-color: var(--color-vault); }
    .bg-surface  { background-color: var(--color-surface-raised); }

    /* Width */
    .w-full   { width: 100%; }
    .w-auto   { width: auto; }
    .min-w-0  { min-width: 0; }

    /* Borders */
    .border        { border: 1px solid var(--color-border); }
    .border-top    { border-top: 1px solid var(--color-border); }
    .border-bottom { border-bottom: 1px solid var(--color-border); }
    .rounded       { border-radius: var(--radius-base); }
    .rounded-lg    { border-radius: var(--radius-lg); }

    /* Overflow */
    .overflow-hidden  { overflow: hidden; }
    .overflow-x-auto  { overflow-x: auto; }

    /* Position */
    .relative { position: relative; }
    .absolute { position: absolute; }
    .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;
    }

    /* Pointer */
    .cursor-pointer { cursor: pointer; }

    /* Truncate */
    .truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Divider */
    .divider {
        border: none;
        border-top: 1px solid var(--color-border-subtle);
        margin: var(--space-6) 0;
    }

    /* Section spacing */
    .section { padding-block: var(--space-20); }
    .section--sm { padding-block: var(--space-12); }
    .section--lg { padding-block: var(--space-32); }
}