@layer theme {
  :root,
  :host {
    --color-primary: oklch(0.45 0.2432 263.63);
    --color-primary-hover: oklch(0.54 0.2003 265.09);
    --color-danger: oklch(0.5117 0.2016 20.62);
    --color-warning: oklch(0.7789 0.1393 46.57);
    --color-info: oklch(0.4956 0.0919 229.96);
    --color-success: oklch(0.735 0.2059 140.88);
  }
}
@layer utilities {
  .bg-primary {
    background-color: var(--color-primary);
  }
  .bg-primary-hover {
    background-color: var(--color-primary-hover);
  }
  .hover\:bg-primary-hover {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-primary-hover);
      }
    }
  }
  .text-primary {
    color: var(--color-primary);
  }
  .hover\:text-primary-hover {
    &:hover {
      @media (hover: hover) {
        color: var(--color-primary-hover);
      }
    }
  }
  .text-danger {
    color: var(--color-danger);
  }
  .text-warning {
    color: var(--color-warning);
  }
  .text-info {
    color: var(--color-info);
  }
  .text-success {
    color: var(--color-success);
  }
  .focus-visible\:text-primary-hover {
    &:focus-visible {
      color: var(--color-primary-hover);
    }
  }
  .container {
    @media (width >= 112rem) {
      max-width: 112rem;
    }
  }
}