:root {
     --primary: oklch(54.6% 0.245 262.881);
     --primary-foreground: rgb(255 255 255);
 }

 @layer utilities {
     .align-left {
         text-align: start;
     }

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

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

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

     .text-lighter {
         color: var(--faint-foreground);
     }

     .flex {
         display: flex;
     }

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

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

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

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

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

     /* Bootstrap inspired. */
     .hstack {
         display: flex;
         align-items: center;
         gap: var(--space-3);
         flex-wrap: wrap;
         align-content: flex-start;
         height: auto;

         >* {
             margin: 0;
         }
     }

     .vstack {
         display: flex;
         flex-direction: column;
         gap: var(--space-3);
     }

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

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

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

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

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

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

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

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

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

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

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

     .mb-8 {
         margin-block-end: var(--space-8);
     }

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

     .w-100 {
         width: 100%;
     }

     :is(ul, ol).unstyled {
         list-style: none;
         text-decoration: none;
         padding: 0;
     }

     a.unstyled {
         color: inherit;
         text-decoration: none;

         &:hover {
             color: var(--primary);
         }
     }
 }

 @layer custom {
     .icon-small {
         font-size: 16px;
         height: 16px;
         width: 16px;
     }

     .icon-medium {
         font-size: 24px;
         height: 24px;
         width: 24px;
     }

     .icon-large {
         font-size: 40px;
         height: 40px;
         width: 40px;
     }

     .show-small {
         display: none;
     }

     .hide-small {
         display: block;
     }

      @media (max-width: 768px) {
          .show-small {
              display: block;
          }

          .hide-small {
              display: none;
          }
      }

       [data-sidebar] nav a {
           align-items: center;
       }

       .card-group {
           display: grid;
           grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
           gap: var(--space-4);
           margin-block: var(--space-2);
       }

       [data-sidebar-layout][data-no-sidebar] > main {
           grid-column: 1 / -1;
       }
   }