/* ============================================================
 * UI.CSS — Lightweight CSS Framework
 * Single file mini-framework containing tokens, themes,
 * resets, components, utilities, and responsive overrides.
 * ============================================================ */

/* ── 1. TOKENS & LAYERS ──────────────────────────────────────── */
@layer base, components, utilities;

:root {
    /* Colors */
    --color-accent: #7DB20E;
    --color-secondary: #d8dcc9;
    --color-primary: #8BC34A;
    --color-surface: #e6ead6;
    --color-text-light: #FFFFFF;
    --color-text-med: #777;
    --color-text-dark: #333333;
    --color-border: rgba(0, 0, 0, 0.12);
    --color-link-hover: rgba(0, 0, 0, 0.05);
    --shadow: rgba(0, 0, 0, 0.2);
    --shadow-b: rgba(255, 255, 255, 0.1);

    /* State Colors */
    --color-info: #2196F3;
    --color-success: #198754;
    --color-danger: #dc3545;

    /* Spacing Scale */
    --spacing-unit: 0.5rem;
    /* 8px at 16px base */
    --s-1: var(--spacing-unit);
    --s-2: calc(var(--spacing-unit) * 2);
    --s-3: calc(var(--spacing-unit) * 3);
    --s-4: calc(var(--spacing-unit) * 4);
    --s-5: calc(var(--spacing-unit) * 5);
    --s-6: calc(var(--spacing-unit) * 6);
    --s-8: calc(var(--spacing-unit) * 8);
    --s-35: calc(var(--spacing-unit) * 35);

    /* Border Radius */
    --border-radius-sm: 5px;
    --border-radius-md: 10px;
    --border-radius-lg: 15px;
    /* --r-gap: the gap (padding) advertised by the nearest r-* parent
       to children. --p-self: the padding of the current element,
       recorded for the parent's r-* class to promote into --r-gap. */
    --r-gap: 0px;
    --p-self: 0px;

    /* Typography */
    --font-primary: 'Ubuntu', sans-serif;
    --font-display: 'Lobster', cursive;

    /* Z-index Scale */
    --z-base: 1;
    --z-dropdown: 10;
    --z-sticky: 100;
    --z-modal: 500;
    --z-toast: 9999;
}

/* ── 2. THEMES ───────────────────────────────────────────────── */
[data-theme="red"] {
    --color-primary: #bf616a;
    --color-secondary: #e6d6d6;
    --color-accent: #8c3f46;
    --color-surface: #f2e6e6;
    --color-link-hover: color-mix(in srgb, var(--color-accent), transparent 90%);
}

[data-theme="blue"] {
    --color-primary: #5e81ac;
    --color-secondary: #d6dae6;
    --color-accent: #3b5374;
    --color-surface: #e6eaf2;
    --color-link-hover: color-mix(in srgb, var(--color-accent), transparent 90%);
}

[data-theme="purple"] {
    --color-primary: #b48ead;
    --color-secondary: #e6d6e6;
    --color-accent: #7b5876;
    --color-surface: #f2e6f2;
    --color-link-hover: color-mix(in srgb, var(--color-accent), transparent 90%);
}

[data-theme="charcoal"] {
    --color-primary: #607d8b;
    --color-secondary: #263238;
    --color-accent: #546e7a;
    --color-surface: #37474f;
    --color-link-hover: color-mix(in srgb, var(--color-accent), transparent 90%);
    --color-text-dark: #eceff1;
    --color-text-med: #cfd8dc;
}

/* ── 3. BASE ─────────────────────────────────────────────────── */
@layer base {

    *,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    body {
        font-family: var(--font-primary);
        background-color: var(--color-secondary);
        color: var(--color-text-dark);
        font-size: clamp(1rem, 1.25vw, 1.2rem);
    }

    a {
        text-decoration: none;
        color: inherit;
        cursor: pointer;
        transition: filter 0.2s ease;
        display: inline-block;
    }

    a:visited {
        color: inherit;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin-bottom: var(--s-2);
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    textarea {
        resize: none;
        display: block;
    }

    select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: none;
        padding: 0;
    }

    select::-ms-expand {
        display: none;
    }

    i {
        margin: 1px;
    }

    blockquote {
        border-left: 4px solid var(--color-primary);
        padding-left: var(--s-3);
        margin: var(--s-3) 0;
        font-style: italic;
        color: #555;
    }

    pre {
        background-color: var(--color-secondary);
        padding: var(--s-2);
        border-radius: var(--border-radius-sm);
        overflow-x: auto;
    }
}

/* ── 4. COMPONENTS ───────────────────────────────────────────── */
@layer components {

    /* Alerts */
    @keyframes fade-in-out {
        0% {
            top: -100%;
            opacity: 0;
        }

        10% {
            top: 0;
            opacity: 1;
        }

        90% {
            top: 0;
            opacity: 1;
        }

        100% {
            top: -100%;
            opacity: 0;
        }
    }

    .alert {
        animation: fade-in-out 5s ease-in-out forwards;
    }

    /* Buttons */
    .btn {
        display: inline-block;
        padding: calc(var(--s-1) * 2.5) var(--s-4);
        font-size: 1rem;
        text-align: center;
        border: none;
        border-radius: var(--border-radius-sm);
        cursor: pointer;
        transition: filter 0.2s ease, box-shadow 0.2s ease;
        white-space: nowrap;
        height: auto;
    }

    .btn-primary {
        background-color: var(--color-accent);
        color: var(--color-text-light);
    }

    .btn-danger {
        background-color: var(--color-danger);
        color: var(--color-text-light);
    }

    .btn-secondary {
        background-color: var(--color-secondary);
        color: var(--color-text-dark);
        border: 1px solid var(--color-primary);
    }

    .btn:hover {
        filter: brightness(110%);
    }

    /* Cards */
    .card {
        background-color: var(--color-surface);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        overflow: hidden;
    }

    .card a {
        min-width: 40px;
        text-align: center;
    }

    .card img {
        width: 100%;
        object-fit: cover;
    }

    .card[id="loader"] {
        box-shadow: none;
    }

    /* Progress Loader */
    @keyframes l {
        0% {
            width: 10%;
        }

        100% {
            width: 100%;
        }
    }

    #loader {
        border-radius: var(--border-radius-sm);
        z-index: var(--z-toast);
        background-color: var(--color-primary);
        position: fixed;
        width: 100%;
        height: 2px;
        left: 0;
        top: 0;
        animation: l 10s linear;
    }

    /* Links / Hover states */
    a.hover:hover {
        filter: brightness(90%);
        background-color: var(--shadow);
    }

    .link:hover {
        background-color: var(--color-link-hover);
    }

    .hl-1:hover {
        box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.10);
    }

    .hl-2:hover {
        box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.20);
    }

    .hl-3:hover {
        box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.30);
    }

    /* Forms */
    form>div:last-child .form-group {
        margin-bottom: 0;
    }

    .form-group {
        position: relative;
        margin-bottom: var(--s-3);
    }

    .form-group>p {
        display: none;
    }

    .form-control {
        width: 100%;
        padding: var(--s-4) var(--s-2) calc(var(--s-1) * 1.5);
        font-size: 1rem;
        font-family: var(--font-primary);
        background-color: var(--color-secondary);
        border: none;
        border-radius: var(--border-radius-sm);
        transition: box-shadow 0.2s ease;
        color: var(--color-text-dark);
    }

    .form-control:focus {
        outline: none;
        box-shadow: 0 0 0 2px var(--color-info);
    }

    .form-control:user-invalid {
        box-shadow: 0 0 0 2px var(--color-danger);
    }

    form .er {
        box-shadow: 0 0 0 2px var(--color-danger);
    }

    .form-group>label {
        position: absolute;
        left: var(--s-2);
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        transition: all 0.2s ease;
    }

    .form-control:not(:placeholder-shown)+label,
    .form-group textarea.form-control:not(:placeholder-shown)+label,
    .form-control:focus+label,
    .form-group textarea.form-control:focus+label {
        top: calc(var(--s-1) * 1.25);
        font-size: 0.8rem;
        transform: translateY(0);
    }

    /* Accordion (core.js) */
    .accordion>div:last-child {
        display: none;
    }

    .clicked>div:last-child {
        display: block !important;
    }

    .clicked .fa-chevron-right {
        transform: rotate(90deg);
        transition: transform 0.2s ease;
    }

    /* Dropdown Navigation Component (core.js) */
    .dropdown {
        position: relative;
        display: inline-block;
        flex: unset !important;
    }

    .dropdown>a {
        text-decoration: none;
        color: inherit;
        cursor: pointer;
        transition: filter 0.2s ease;
        display: inline-block;
        padding: var(--s-2);
    }

    .dropdown>div {
        position: absolute;
        margin-top: var(--s-3);
        padding: var(--s-2);
        right: 0;
        background-color: var(--color-primary);
        z-index: var(--z-dropdown);
        display: none;
        border-radius: var(--border-radius-md);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .dropdown>div>a {
        width: max-content;
        display: block;
        padding: var(--s-2);
        text-decoration: none;
        border-radius: var(--border-radius-sm);
    }

    .dropdown>div>a:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }

    .dropped>div {
        display: block;
    }



    /* Dialog / Modal */
    dialog {
        border: none;
        border-radius: var(--border-radius-lg);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        padding: 0;
        width: 80%;
        max-width: 500px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: var(--color-secondary);
    }

    dialog::backdrop {
        background-color: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(3px);
    }

    .modal-header {
        padding: var(--s-2) var(--s-3);
    }

    .modal-body {
        padding: var(--s-3);
    }

    .modal-footer {
        padding: var(--s-2) var(--s-3);
        text-align: right;
        background-color: var(--color-secondary);
        border-bottom-left-radius: var(--border-radius-lg);
        border-bottom-right-radius: var(--border-radius-lg);
    }

    /* Modal Overlay helper (core.js toggle) */
    .modal-overlay {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }

    /* Listview */
    .listview>div {
        border-radius: 0;
        border: 1px solid var(--color-secondary);
    }

    /* File Upload */
    #file-upload-input {
        opacity: 0;
        width: 0.1px;
        height: 0.1px;
        position: absolute;
        z-index: -1;
    }

    .upload-btn {
        display: inline-block;
        color: var(--color-text-dark);
        font-weight: bold;
        cursor: pointer;
    }

    /* ── Badge ─────────────────────────────────────────────────── */
    .badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.15em 0.55em;
        font-size: 0.72rem;
        font-weight: 600;
        line-height: 1;
        border-radius: 999px;
        white-space: nowrap;
        vertical-align: middle;
        /* Default: Solid / primary */
        background-color: var(--color-accent);
        color: #fff;
        border: 1.5px solid transparent;
    }

    /* — Color modifiers (solid) — */
    .badge-primary {
        background-color: var(--color-primary);
        color: #fff;
        border-color: transparent;
    }

    .badge-info {
        background-color: var(--color-info);
        color: #fff;
        border-color: transparent;
    }

    .badge-success {
        background-color: var(--color-success);
        color: #fff;
        border-color: transparent;
    }

    .badge-danger {
        background-color: var(--color-danger);
        color: #fff;
        border-color: transparent;
    }

    .badge-neutral {
        background-color: #9ca3af;
        color: #fff;
        border-color: transparent;
    }

    /* — Outline variant — */
    .badge-outline {
        background-color: transparent;
        color: var(--color-accent);
        border-color: var(--color-accent);
    }

    .badge-outline.badge-primary {
        color: var(--color-primary);
        border-color: var(--color-primary);
    }

    .badge-outline.badge-info {
        color: var(--color-info);
        border-color: var(--color-info);
    }

    .badge-outline.badge-success {
        color: var(--color-success);
        border-color: var(--color-success);
    }

    .badge-outline.badge-danger {
        color: var(--color-danger);
        border-color: var(--color-danger);
    }

    .badge-outline.badge-neutral {
        color: #6b7280;
        border-color: #9ca3af;
    }

    /* — Soft / Pastel variant — */
    .badge-soft {
        background-color: color-mix(in srgb, var(--color-accent) 15%, transparent);
        color: var(--color-accent);
        border-color: transparent;
    }

    .badge-soft.badge-primary {
        background-color: color-mix(in srgb, var(--color-primary) 15%, transparent);
        color: var(--color-primary);
    }

    .badge-soft.badge-info {
        background-color: color-mix(in srgb, var(--color-info) 15%, transparent);
        color: var(--color-info);
    }

    .badge-soft.badge-success {
        background-color: color-mix(in srgb, var(--color-success) 15%, transparent);
        color: var(--color-success);
    }

    .badge-soft.badge-danger {
        background-color: color-mix(in srgb, var(--color-danger) 15%, transparent);
        color: var(--color-danger);
    }

    .badge-soft.badge-neutral {
        background-color: #f3f4f6;
        color: #6b7280;
    }

    /* — Dot variant — */
    .badge-dot {
        background-color: transparent;
        color: var(--color-text-dark);
        border-color: transparent;
        padding-left: 0.25em;
        gap: 0.35em;
    }

    .badge-dot::before {
        content: '';
        display: inline-block;
        width: 0.5em;
        height: 0.5em;
        border-radius: 50%;
        background-color: var(--color-accent);
        flex-shrink: 0;
    }

    .badge-dot.badge-primary::before {
        background-color: var(--color-primary);
    }

    .badge-dot.badge-info::before {
        background-color: var(--color-info);
    }

    .badge-dot.badge-success::before {
        background-color: var(--color-success);
    }

    .badge-dot.badge-danger::before {
        background-color: var(--color-danger);
    }

    .badge-dot.badge-neutral::before {
        background-color: #9ca3af;
    }

    /* Tooltip */
    [tooltip] {
        position: relative;
        cursor: pointer;
    }

    [tooltip]::after {
        content: attr(tooltip);
        position: absolute;
        bottom: 125%;
        left: 50%;
        transform: translateX(-50%);
        background-color: #1f2937;
        color: #ffffff;
        padding: 8px 12px;
        border-radius: 6px;
        font-size: 0.875rem;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
        z-index: var(--z-dropdown);
    }

    [tooltip]::before {
        content: '';
        position: absolute;
        bottom: 125%;
        left: 50%;
        transform: translateX(-50%) translateY(100%);
        border-width: 5px;
        border-style: solid;
        border-color: #1f2937 transparent transparent transparent;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
        z-index: var(--z-dropdown);
    }

    [tooltip]:hover::after,
    [tooltip]:hover::before {
        opacity: 1;
        visibility: visible;
    }

    /* Toast */
    @keyframes toast-slide-up-down {
        0% {
            transform: translateY(100%);
            opacity: 0;
        }

        10% {
            transform: translateY(0);
            opacity: 1;
        }

        90% {
            transform: translateY(0);
            opacity: 1;
        }

        100% {
            transform: translateY(100%);
            opacity: 0;
        }
    }

    .toast-container {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: var(--z-toast);
        pointer-events: none;
        background-color: rgba(0, 0, 0, 0.5);
        color: var(--color-text-light);
        padding: var(--s-2) var(--s-3);
    }

    .toast-container:empty {
        display: none;
    }

    .toast-show {
        width: 100%;
        animation: toast-slide-up-down 5s ease-in-out forwards;
    }

}

/* end @layer components */

/* ── 5. UTILITIES ────────────────────────────────────────────── */
@layer utilities {

    /* Display */
    .block {
        display: block;
    }

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

    .inline {
        display: inline;
    }

    .grid {
        display: grid;
    }

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

    .hide {
        display: none;
    }

    /* Visibility Utilities */
    @media (max-width: 767px) {
        .hide-mobile {
            display: none !important;
        }

        .desktop-only {
            display: none !important;
        }

        .tablet-only {
            display: none !important;
        }
    }

    @media (min-width: 768px) and (max-width: 999px) {
        .hide-tablet {
            display: none !important;
        }

        .desktop-only {
            display: none !important;
        }

        .mobile-only {
            display: none !important;
        }
    }

    @media (min-width: 1000px) {
        .hide-desktop {
            display: none !important;
        }

        .tablet-only {
            display: none !important;
        }

        .mobile-only {
            display: none !important;
        }
    }

    /* Screen readers only */
    .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;
    }

    /* Container */
    .container {
        max-width: 1080px;
        margin: 0 auto;
        padding: 0 var(--s-2);
    }

    .container-fluid {
        width: 100%;
        padding: 0 var(--s-2);
    }

    .ui {
        max-width: 1300px;
        margin: 0 auto;
    }

    /* Flex */
    .flex {
        display: flex;
    }

    .flex-col {
        flex-direction: column;
    }

    .flex-wrap {
        flex-wrap: wrap;
    }

    .flex-nowrap {
        flex-wrap: nowrap;
    }

    .flex-1 {
        flex: 1;
    }

    .flex-auto {
        flex: auto;
    }

    .shrink-0 {
        flex-shrink: 0;
    }

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

    .items-start {
        align-items: flex-start;
    }

    .items-end {
        align-items: flex-end;
    }

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

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

    .justify-end {
        justify-content: flex-end;
    }

    .flex-col-mobile {
        flex-direction: column;
        gap: 0;
    }

    .flex>.form-group {
        margin-bottom: 0;
        width: -webkit-fill-available;
        width: -moz-available;
    }

    /* Widths */
    .w-min {
        min-width: 2rem;
    }

    .w-fit {
        width: fit-content;
        height: fit-content;
    }

    .w-full {
        width: 100%;
    }

    .w-half {
        width: 50%;
    }

    .w-third {
        width: 33.3333%;
    }

    .w-quarter {
        width: 25%;
    }

    /* Responsive Column Grid */
    [class*="col-"] {
        width: 100%;
    }

    /* Gap */
    .gap-1 {
        gap: var(--s-1) !important;
    }

    .gap-2 {
        gap: var(--s-2) !important;
    }

    .gap-3 {
        gap: var(--s-3) !important;
    }

    .gap-4 {
        gap: var(--s-4) !important;
    }

    .gap-5 {
        gap: var(--s-5) !important;
    }

    /* ── Border Radius Utilities ──────────────────────────────────
     *  HOW IT WORKS:
     *  1. Parent gets .r-lg (or sm/md) → sets --r-base (its radius)
     *     and --r-gap equal to its OWN --p-self (its padding).
     *     These two vars inherit down to all descendants.
     *
     *  2. Child gets .p-2 → sets --p-self on ITSELF only.
     *     This does NOT touch --r-gap (which stays as the parent set it).
     *
     *  3. Child gets .r-inner → reads the inherited --r-base and --r-gap
     *     from the parent, computes the perfect inset radius.
     *     Also resets --r-gap: 0px for its own children.
     *
     *  RESULT: a child with both .p-2 and .r-inner works correctly
     *  because --r-gap always comes from the parent's padding, never
     *  from the child's own padding.
     * ─────────────────────────────────────────────────────────── */
    .r-sm {
        --r-base: var(--border-radius-sm);
        --r-gap: var(--p-self, 0px);
        /* promote own padding as the gap for children */
        border-radius: var(--r-base);
    }

    .r-md {
        --r-base: var(--border-radius-md);
        --r-gap: var(--p-self, 0px);
        border-radius: var(--r-base);
    }

    .r-lg {
        --r-base: var(--border-radius-lg);
        --r-gap: var(--p-self, 0px);
        border-radius: var(--r-base);
    }

    /* Child auto-inset radius.
     * Resets --r-gap to 0 so ITS children start clean. */
    .r-inner {
        border-radius: clamp(0px, calc(var(--r-base, 0px) - var(--r-gap, 0px)), 9999px);
        --r-gap: 0px;
    }

    /* Padding — also records the value in --p-self so that if this
     * element also has .r-sm/md/lg, its padding is promoted to --r-gap
     * for its children. Does NOT write --r-gap directly (that is only
     * done by .r-sm/md/lg) to avoid clobbering the inherited gap. */
    .p-05 {
        padding: calc(var(--s-1) * .5);
        --p-self: calc(var(--s-1) * .5);
    }

    .p-1 {
        padding: var(--s-1);
        --p-self: var(--s-1);
    }

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

    .p-3 {
        padding: var(--s-3);
        --p-self: var(--s-3);
    }

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

    .p-5 {
        padding: var(--s-5);
        --p-self: var(--s-5);
    }

    .py-1 {
        padding-top: var(--s-1);
        padding-bottom: var(--s-1);
    }

    .py-2 {
        padding-top: var(--s-2);
        padding-bottom: var(--s-2);
    }

    .py-3 {
        padding-top: var(--s-3);
        padding-bottom: var(--s-3);
    }

    .px-1 {
        padding-left: var(--s-1);
        padding-right: var(--s-1);
    }

    .px-2 {
        padding-left: var(--s-2);
        padding-right: var(--s-2);
    }

    .px-3 {
        padding-left: var(--s-3);
        padding-right: var(--s-3);
    }

    .pt-1 {
        padding-top: var(--s-1);
    }

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

    .pt-3 {
        padding-top: var(--s-3);
    }

    .pb-1 {
        padding-bottom: var(--s-1);
    }

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

    .pb-3 {
        padding-bottom: var(--s-3);
    }

    .pl-1 {
        padding-left: var(--s-1);
    }

    .pl-2 {
        padding-left: var(--s-2);
    }

    .pl-3 {
        padding-left: var(--s-3);
    }

    .pr-1 {
        padding-right: var(--s-1);
    }

    .pr-2 {
        padding-right: var(--s-2);
    }

    .pr-3 {
        padding-right: var(--s-3);
    }

    /* Margin */
    .m-1 {
        margin: var(--s-1);
    }

    .m-2 {
        margin: var(--s-2);
    }

    .m-3 {
        margin: var(--s-3);
    }

    .ma {
        margin: auto;
    }

    .mr-a {
        margin-right: auto;
    }

    .ml-a {
        margin-left: auto;
    }

    .mt-a {
        margin-top: auto;
    }

    .mb-a {
        margin-bottom: auto;
    }

    .my-1 {
        margin-top: var(--s-1);
        margin-bottom: var(--s-1);
    }

    .my-2 {
        margin-top: var(--s-2);
        margin-bottom: var(--s-2);
    }

    .my-3 {
        margin-top: var(--s-3);
        margin-bottom: var(--s-3);
    }

    .mx-1 {
        margin-left: var(--s-1);
        margin-right: var(--s-1);
    }

    .mx-2 {
        margin-left: var(--s-2);
        margin-right: var(--s-2);
    }

    .mx-3 {
        margin-left: var(--s-3);
        margin-right: var(--s-3);
    }

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

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

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

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

    .mb-1 {
        margin-bottom: var(--s-1);
    }

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

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

    .ml-1 {
        margin-left: var(--s-1);
    }

    .ml-2 {
        margin-left: var(--s-2);
    }

    .ml-3 {
        margin-left: var(--s-3);
    }

    .mr-1 {
        margin-right: var(--s-1);
    }

    .mr-2 {
        margin-right: var(--s-2);
    }

    .mr-3 {
        margin-right: var(--s-3);
    }

    /* Position */
    .relative {
        position: relative;
    }

    .absolute {
        position: absolute;
    }

    .fixed {
        position: fixed;
    }

    .sticky {
        position: sticky;
        top: 0;
    }

    .top-0 {
        top: 0;
    }

    .right-0 {
        right: 0;
    }

    .bottom-0 {
        bottom: 0;
    }

    .left-0 {
        left: 0;
    }

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

    .overflow-auto {
        overflow: auto;
    }

    .overflow-x-auto {
        overflow-x: auto;
    }

    /* Z-index */
    .z-1 {
        z-index: var(--z-base);
    }

    .z-10 {
        z-index: var(--z-dropdown);
    }

    .z-sticky {
        z-index: var(--z-sticky);
    }

    .z-modal {
        z-index: var(--z-modal);
    }

    /* Typography Utilities */
    .text-center {
        text-align: center;
    }

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

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

    .t-sm,
    .text-small {
        font-size: small;
    }

    .t-md {
        font-size: medium;
    }

    .t-lg,
    .text-large {
        font-size: large;
    }

    .bold {
        font-weight: bold;
    }

    .lowercase {
        text-transform: lowercase;
    }

    .uppercase {
        text-transform: uppercase;
    }

    .nowrap {
        white-space: nowrap;
    }

    .to {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    /* Background Colors */
    .bg-primary {
        background-color: var(--color-primary);
    }

    .bg-secondary {
        background-color: var(--color-secondary);
    }

    .bg-accent {
        background-color: var(--color-accent);
    }

    .bg-surface {
        background-color: var(--color-surface);
    }

    .bg-danger {
        background-color: var(--color-danger);
    }

    .bg-success {
        background-color: var(--color-success);
    }

    .bg-info {
        background-color: var(--color-info);
    }

    /* Text Colors */
    .text-light {
        color: var(--color-text-light);
    }

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

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

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

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

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

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

    /* Border Radius */
    .r-sm,
    .rounded-sm {
        border-radius: var(--border-radius-sm);
    }

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

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

    .r-cir,
    .rounded-cir {
        border-radius: 50%;
    }

    /* Borders */
    .b-l {
        border: 2px dashed var(--shadow);
    }

    .bb-l {
        border-bottom: 2px dashed var(--shadow);
    }

    .bt-l {
        border-top: 2px dashed var(--shadow);
    }

    .br-l {
        border-right: 2px dashed var(--shadow);
    }

    .bl-l {
        border-left: 2px dashed var(--shadow);
    }

    .b-d {
        border: 2px dotted var(--shadow);
    }

    .bb-d {
        border-bottom: 2px dotted var(--shadow);
    }

    .bt-d {
        border-top: 2px dotted var(--shadow);
    }

    .br-d {
        border-right: 2px dotted var(--shadow);
    }

    .bl-d {
        border-left: 2px dotted var(--shadow);
    }

    .b-s {
        border: 2px solid var(--shadow);
    }

    .bb-s {
        border-bottom: 2px solid var(--shadow);
    }

    .bt-s {
        border-top: 2px solid var(--shadow);
    }

    .br-s {
        border-right: 2px solid var(--shadow);
    }

    .bl-s {
        border-left: 2px solid var(--shadow);
    }

    /* Misc */
    .cursor {
        cursor: pointer;
    }

    .transition {
        transition: all 0.2s ease;
    }

    .selected {
        background-color: var(--color-link-hover);
        color: var(--color-text-dark);
    }

    .active {
        background-color: var(--color-link-hover);
        color: var(--color-text-dark);
    }

    .mw-d {
        max-width: 30%;
    }

}

/* end @layer utilities */