/* ============================================================
   UTILITIES — Reusable Helper Classes
   ============================================================ */

        @layer utilities {

            /* — Layout — */
            .container {
                width: var(--space-container);
                margin: 0 auto;
            }

            .max-w-prose {
                max-width: 65ch;
            }

            .text-center {
                text-align: center;
            }

            .text-left {
                text-align: left;
            }

            .text-right {
                text-align: right;
            }

            /* — Spacing — */
            .mt-0 {
                margin-top: 0;
            }

            .mt-1 {
                margin-top: var(--space-1);
            }

            .mt-2 {
                margin-top: var(--space-2);
            }

            .mt-3 {
                margin-top: var(--space-3);
            }

            .mt-4 {
                margin-top: var(--space-4);
            }

            .mt-5 {
                margin-top: var(--space-5);
            }

            .mt-6 {
                margin-top: var(--space-6);
            }

            .mt-8 {
                margin-top: var(--space-8);
            }

            .mt-10 {
                margin-top: var(--space-10);
            }

            .mt-12 {
                margin-top: var(--space-12);
            }

            .mt-14 {
                margin-top: var(--space-14);
            }

            .mb-0 {
                margin-bottom: 0;
            }

            .mb-2 {
                margin-bottom: var(--space-2);
            }

            .mb-3 {
                margin-bottom: var(--space-3);
            }

            .mb-4 {
                margin-bottom: var(--space-4);
            }

            .mb-6 {
                margin-bottom: var(--space-6);
            }

            .p-0 {
                padding: 0;
            }

            .p-2 {
                padding: var(--space-2);
            }

            .p-4 {
                padding: var(--space-4);
            }

            .p-6 {
                padding: var(--space-6);
            }

            .p-8 {
                padding: var(--space-8);
            }

            .pt-0 {
                padding-top: 0;
            }

            .pt-2 {
                padding-top: var(--space-2);
            }

            .pt-4 {
                padding-top: var(--space-4);
            }

            .pt-6 {
                padding-top: var(--space-6);
            }

            .pb-0 {
                padding-bottom: 0;
            }

            .pb-2 {
                padding-bottom: var(--space-2);
            }

            .pb-4 {
                padding-bottom: var(--space-4);
            }

            .pb-6 {
                padding-bottom: var(--space-6);
            }

            .gap-2 {
                gap: var(--space-2);
            }

            .gap-4 {
                gap: var(--space-4);
            }

            .gap-6 {
                gap: var(--space-6);
            }

            .gap-8 {
                gap: var(--space-8);
            }

            /* — Typography — */
            .font-sans {
                font-family: var(--font-sans);
            }

            .font-serif {
                font-family: var(--font-serif);
            }

            .font-display {
                font-family: var(--font-display);
            }

            .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-2xl {
                font-size: var(--text-2xl);
            }

            .leading-tight {
                line-height: var(--leading-tight);
            }

            .leading-snug {
                line-height: var(--leading-snug);
            }

            .leading-normal {
                line-height: var(--leading-normal);
            }

            .leading-relaxed {
                line-height: var(--leading-relaxed);
            }

            .leading-loose {
                line-height: var(--leading-loose);
            }

            .tracking-tight {
                letter-spacing: var(--tracking-tight);
            }

            .tracking-wide {
                letter-spacing: var(--tracking-wide);
            }

            .tracking-widest {
                letter-spacing: var(--tracking-widest);
            }

            .text-balance {
                text-wrap: balance;
            }

            /* — Colors — */
            .text-ink {
                color: var(--ink);
            }

            .text-muted {
                color: var(--muted);
            }

            .text-accent {
                color: var(--accent);
            }

            .text-accent-dark {
                color: var(--accent-dark);
            }

            .text-paper {
                color: var(--paper);
            }

            .text-paper-soft {
                color: var(--paper-soft);
            }

            .text-white {
                color: var(--white);
            }

            .bg-ink {
                background: var(--ink);
            }

            .bg-paper {
                background: var(--paper);
            }

            .bg-paper-soft {
                background: var(--paper-soft);
            }

            .bg-white {
                background: var(--white);
            }

            /* — Borders — */
            .border {
                border: 1px solid var(--line);
            }

            .border-top {
                border-top: 1px solid var(--line);
            }

            .border-bottom {
                border-bottom: 1px solid var(--line);
            }

            .rounded-sm {
                border-radius: var(--radius-sm);
            }

            .rounded-md {
                border-radius: var(--radius-md);
            }

            .rounded-lg {
                border-radius: var(--radius-lg);
            }

            .rounded-xl {
                border-radius: var(--radius-xl);
            }

            .rounded-full {
                border-radius: var(--radius-pill);
            }

            /* — Display — */
            .flex {
                display: flex;
            }

            .grid {
                display: grid;
            }

            .hidden {
                display: none;
            }

            .block {
                display: block;
            }

            .inline-flex {
                display: inline-flex;
            }

            .items-center {
                align-items: center;
            }

            .justify-center {
                justify-content: center;
            }

            .justify-between {
                justify-content: space-between;
            }

            /* — Shadows — */
            .shadow-sm {
                box-shadow: var(--shadow-sm);
            }

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

            .shadow-nav {
                box-shadow: var(--shadow-nav);
            }

            .shadow-float {
                box-shadow: var(--shadow-float);
            }

            /* — Overflow — */
            .overflow-hidden {
                overflow: hidden;
            }

            .whitespace-nowrap {
                white-space: nowrap;
            }

            /* — Transitions — */
            .transition-fast {
                transition: all var(--duration-fast) var(--ease);
            }

            .transition-normal {
                transition: all var(--duration-normal) var(--ease);
            }

            .transition-slow {
                transition: all var(--duration-slow) var(--ease);
            }

            /* — Focus Utilities — */
            .focus-ring:focus-visible {
                outline: 2px solid var(--accent);
                outline-offset: var(--space-1);
            }

            .focus-ring-subtle:focus-visible {
                outline: 2px solid var(--accent);
                outline-offset: var(--space-1);
                box-shadow: var(--shadow-focus);
            }
        }